`@media` और रिस्पॉन्सिव डिज़ाइन
यह लेख @media और रिस्पॉन्सिव डिज़ाइन को समझाता है।
आप @media की मूल सिंटैक्स और उपयोग के उदाहरणों के द्वारा लचीलें लेआउट्स बनाना सीखेंगे।
YouTube Video
प्रीव्यू के लिए HTML
css-responsive-media.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-responsive-media.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Responsive Design</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>@media</h2>
20 </header>
21 <article>
22 <h3>@media Syntax</h3>
23 <section>
24 <header><h4>CSS</h4></header>
25<pre class="sample">
26@media media-type and (condition) {
27 /* Styles applied when the media query is matched */
28}
29</pre>
30 </section>
31 </article>
32 <article>
33 <h3>@media Example : max-width</h3>
34 <section>
35 <header><h4>CSS</h4></header>
36<pre class="sample">
37@media screen and (max-width: 600px) {
38 body {
39 background-color: lightblue;
40 }
41 p {
42 font-size: 14px;
43 }
44}
45</pre>
46 </section>
47 </article>
48 <article>
49 <h3>@media Example : orientation</h3>
50 <section>
51 <header><h4>CSS</h4></header>
52<pre class="sample">
53@media screen and (orientation: landscape) {
54 body {
55 background-color: lightgreen;
56 }
57}
58</pre>
59 </section>
60 </article>
61 <article>
62 <h3>@media Example : min-width & max-width</h3>
63 <section>
64 <header><h4>CSS</h4></header>
65<pre class="sample">
66@media screen and (min-width: 768px) and (max-width: 1024px) {
67 body {
68 background-color: lightgray;
69 }
70}
71</pre>
72 </section>
73 </article>
74 <article>
75 <h3>@media Example : devices</h3>
76 <section>
77 <header><h4>CSS</h4></header>
78<pre class="sample">
79/* Mobile styles */
80@media screen and (max-width: 600px) {
81 body {
82 font-size: 14px;
83 }
84}
85
86/* Tablet styles */
87@media screen and (min-width: 601px) and (max-width: 1024px) {
88 body {
89 font-size: 16px;
90 }
91}
92
93/* Desktop styles */
94@media screen and (min-width: 1025px) {
95 body {
96 font-size: 18px;
97 }
98}
99</pre>
100 </section>
101 </article>
102 </main>
103</body>
104</html>@media नियम
@media एक नियम है जो विशिष्ट शर्तों के आधार पर स्टाइल लागू करने के लिए CSS मीडिया क्वेरी का उपयोग करता है। यह डिवाइस की स्क्रीन आकार, अभिविन्यास, रिज़ॉल्यूशन, या अन्य विशेषताओं के अनुसार अलग-अलग CSS लागू करने की अनुमति देता है। मुख्य रूप से उत्तरदायी डिज़ाइन के लिए उपयोग किया जाता है, यह डेस्कटॉप, टैबलेट और मोबाइल जैसे विभिन्न उपकरणों पर स्वरूप को समायोजित करने में मदद करता है।
मूल वाक्यविन्यास
1@media media-type and (condition) {
2 /* Styles applied when the media query is matched */
3}media-typeमें, मीडिया के प्रकार को निर्दिष्ट करें (जैसे,screen,print)।conditionमें, स्क्रीन आकार या रिज़ॉल्यूशन जैसी शर्तों को निर्दिष्ट करें।
मीडिया प्रकार
- स्क्रीन: कंप्यूटर और स्मार्टफोन जैसे उपकरणों पर स्क्रीन प्रदर्शन के लिए शैलियाँ।
- प्रिंट: यह प्रिंटिंग के लिए लागू की गई शैली है।
- सभी: यह शैली सभी मीडिया पर लागू होती है।
आम तौर पर उपयोग की जाने वाली शर्तें
- min-width / max-width: स्क्रीन की न्यूनतम/अधिकतम चौड़ाई के अनुसार स्टाइल लागू करें।
- min-height / max-height: स्क्रीन की न्यूनतम/अधिकतम ऊंचाई के अनुसार स्टाइल लागू करें।
- orientation: स्क्रीन के अभिविन्यास को निर्दिष्ट करें (
portraitखड़ी के लिए,landscapeक्षैतिज के लिए)। - resolution: स्क्रीन के रिज़ॉल्यूशन (जैसे, DPI) के अनुसार स्टाइल लागू करें।
उदाहरण उपयोग
स्क्रीन चौड़ाई के आधार पर शैली में बदलाव
उदाहरण के लिए, जब स्क्रीन की चौड़ाई 600 पिक्सल से कम हो, तो लागू शैलियों को निर्दिष्ट करने के लिए इसे इस तरह लिख सकते हैं:।
1@media screen and (max-width: 600px) {
2 body {
3 background-color: lightblue;
4 }
5 p {
6 font-size: 14px;
7 }
8}- 600px या उससे कम स्क्रीन चौड़ाई वाले उपकरणों पर, पृष्ठभूमि का रंग हल्का नीला हो जाता है और अनुच्छेद का फ़ॉन्ट आकार 14px बन जाता है।
स्क्रीन के अभिविन्यास के आधार पर शैली
डिवाइस के परिदृश्य अभिविन्यास में होने पर शैली को लागू करने के लिए आप इसे इस प्रकार लिख सकते हैं:।
1@media screen and (orientation: landscape) {
2 body {
3 background-color: lightgreen;
4 }
5}- जब स्क्रीन परिदृश्य मोड में होती है, तो पृष्ठभूमि का रंग हल्का हरा हो जाता है।
3. एक साथ कई शर्तों को जोड़ने का उदाहरण
आप and का उपयोग करके कई शर्तों को मिला सकते हैं ताकि अधिक विशिष्ट शर्तों के लिए शैलियाँ लागू कर सकें।
1@media screen and (min-width: 768px) and (max-width: 1024px) {
2 body {
3 background-color: lightgray;
4 }
5}- यदि स्क्रीन की चौड़ाई 768px और 1024px के बीच है, तो पृष्ठभूमि का रंग हल्का ग्रे हो जाता है।
अनुप्रयोग उदाहरण: प्रतिक्रियाशील डिज़ाइन
1/* Mobile styles */
2@media screen and (max-width: 600px) {
3 body {
4 font-size: 14px;
5 }
6}
7
8/* Tablet styles */
9@media screen and (min-width: 601px) and (max-width: 1024px) {
10 body {
11 font-size: 16px;
12 }
13}
14
15/* Desktop styles */
16@media screen and (min-width: 1025px) {
17 body {
18 font-size: 18px;
19 }
20}प्रतिक्रियाशील डिज़ाइन में, स्क्रीन की चौड़ाई के आधार पर विभिन्न लेआउट लागू करना सामान्य है।
- फॉन्ट आकार मोबाइल (600px या कम), टैबलेट (601px से 1024px), और डेस्कटॉप (1025px या अधिक) पर बदलते हैं।
सारांश
@media एक शक्तिशाली उपकरण है जो उपकरणों और स्क्रीन आकारों के अनुसार CSS शैलियों को बदलने के लिए उपयोग किया जाता है और यह प्रतिक्रियाशील डिज़ाइन के लिए आवश्यक है। min-width और max-width जैसी शर्तों का कुशलतापूर्वक उपयोग करके, आप विभिन्न उपकरणों के लिए अनुकूलित वेबसाइट बना सकते हैं।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।