CSS में प्रतिसादात्मक डिज़ाइन का अवलोकन
यह लेख CSS में रिस्पॉन्सिव डिज़ाइन का अवलोकन समझाता है।
हम रिस्पॉन्सिव डिज़ाइन की मूल अवधारणा और इसे लागू करने में CSS की भूमिका का अवलोकन देंगे।
YouTube Video
प्रीव्यू के लिए HTML
css-responsive-overview.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-overview.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>Responsive Design Related Properties</h2>
20 </header>
21 <article>
22 <h3>Media Queries</h3>
23 <section>
24 <header><h4>CSS</h4></header>
25<pre class="sample">
26/* When the screen width is 600px or less */
27@media (max-width: 600px) {
28 body {
29 background-color: lightblue;
30 }
31}
32/* When the screen width is between 601px and 1200px */
33@media (min-width: 601px) and (max-width: 1200px) {
34 body {
35 background-color: lightgreen;
36 }
37}
38/* When the screen width is 1201px or more */
39@media (min-width: 1201px) {
40 body {
41 background-color: lightyellow;
42 }
43}
44</pre>
45 </section>
46 </article>
47 <article>
48 <h3>Fluid Layouts</h3>
49 <section>
50 <header><h4>CSS</h4></header>
51<pre class="sample">
52.container {
53 width: 80%; /* 80% width relative to the parent element */
54 margin: 0 auto; /* Center the element */
55}
56</pre>
57 </section>
58 </article>
59 <article>
60 <h3>Responsive Images</h3>
61 <section>
62 <header><h4>CSS</h4></header>
63<pre class="sample">
64img {
65 max-width: 100%;
66 height: auto;
67}
68</pre>
69 </section>
70 </article>
71 <article>
72 <h3>Viewport</h3>
73 <section>
74 <header><h4>HTML</h4></header>
75 <pre><meta name="viewport" content="width=device-width, initial-scale=1.0"></pre>
76 </section>
77 </article>
78 <article>
79 <h3>CSS Frameworks</h3>
80 <section>
81 <header><h4>HTML</h4></header>
82<pre>
83<div class="container">
84 <div class="row">
85 <div class="col-md-6">Left content</div>
86 <div class="col-md-6">Right content</div>
87 </div>
88</div>
89</pre>
90 </section>
91 </article>
92 <article>
93 <h3>Flexbox & Grid Layout</h3>
94 <section>
95 <header><h4>CSS</h4></header>
96<pre class="sample">
97/* Flex Example */
98.container {
99 display: flex;
100 flex-wrap: wrap; /* Allow elements to wrap */
101}
102
103.item {
104 flex: 1 1 200px; /* Each item has a minimum width of 200px */
105}
106
107/* Grid Example */
108.container {
109 display: grid;
110 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
111 gap: 16px;
112}
113</pre>
114 </section>
115 </article>
116 </main>
117</body>
118</html>CSS में प्रतिसादात्मक डिज़ाइन का अवलोकन
CSS में, प्रतिसादात्मक डिज़ाइन एक तकनीक है जो स्मार्टफ़ोन, टैबलेट और डेस्कटॉप जैसी विभिन्न डिवाइसों और स्क्रीन आकारों पर वेबपेज की रूपरेखा और सामग्री को उचित रूप से प्रदर्शित करने के लिए उपयोग की जाती है। प्रतिसादात्मक डिज़ाइन हासिल करने के लिए मुख्यतः निम्नलिखित तकनीकों और तरीकों का उपयोग किया जाता है।
मीडिया क्वेरीज़
1/* When the screen width is 600px or less */
2@media (max-width: 600px) {
3 body {
4 background-color: lightblue;
5 }
6}
7/* When the screen width is between 601px and 1200px */
8@media (min-width: 601px) and (max-width: 1200px) {
9 body {
10 background-color: lightgreen;
11 }
12}
13/* When the screen width is 1201px or more */
14@media (min-width: 1201px) {
15 body {
16 background-color: lightyellow;
17 }
18}मीडिया क्वेरीज़ एक सुविधा है जो आपको डिवाइस की चौड़ाई, ऊंचाई, संकल्प और अन्य विशेषताओं के आधार पर विभिन्न CSS नियम लागू करने की अनुमति देती है। यह विभिन्न शैलियों को स्क्रीन आकार पर निर्भर करते हुए लागू करने की अनुमति देता है।
इस उदाहरण में, पृष्ठभूमि का रंग स्क्रीन की चौड़ाई के अनुसार बदलता है।
लचीली रूपरेखा
1.container {
2 width: 80%; /* 80% width relative to the parent element */
3 margin: 0 auto; /* Center the element */
4}प्रतिसादात्मक डिज़ाइन में, तत्वों की चौड़ाई और ऊंचाई को सापेक्ष इकाइयों जैसे प्रतिशत या em का उपयोग करके निर्दिष्ट किया जाता है, न कि पूर्ण पिक्सेल मानों का। यह रूपरेखा को स्क्रीन आकार के अनुसार लचीले तरीके से बदलने की अनुमति देता है।
प्रतिसादात्मक छवियां
1img {
2 max-width: 100%;
3 height: auto;
4}छवियों को भी स्क्रीन आकार के अनुसार स्केल करने के लिए सेट किया जाता है। उदाहरण के लिए, max-width का उपयोग करके छवियों को समायोजित किया जा सकता है ताकि वे अपने मूल तत्व की चौड़ाई से अधिक न हों।
व्यूपोर्ट सेटिंग्स
1<meta name="viewport" content="width=device-width, initial-scale=1.0">डिवाइस की स्क्रीन चौड़ाई को ब्राउज़र द्वारा सही ढंग से समझा जाए, यह सुनिश्चित करने के लिए HTML में <meta> टैग का उपयोग करें। इसके बिना, प्रतिकियात्मक डिज़ाइन सही ढंग से काम नहीं करेगा, विशेष रूप से मोबाइल उपकरणों पर।
CSS फ्रेमवर्क्स का उपयोग
प्रतिसादात्मक डिज़ाइन को कुशलतापूर्वक प्राप्त करने के लिए Bootstrap और Tailwind CSS जैसे CSS फ्रेमवर्क्स का अक्सर उपयोग किया जाता है। ये फ्रेमवर्क पूर्व-परिभाषित कक्षाओं का उपयोग करके आसानी से प्रतिसादात्मक रूपरेखा बनाने के लिए डिज़ाइन किए गए हैं।
उदाहरण: बूटस्ट्रैप का ग्रिड सिस्टम
1<div class="container">
2 <div class="row">
3 <div class="col-md-6">Left content</div>
4 <div class="col-md-6">Right content</div>
5 </div>
6</div>उपरोक्त उदाहरण में, जब स्क्रीन चौड़ाई md (मध्यम आकार, आमतौर पर 768px या अधिक) होती है, तो दो कॉलम बगल में व्यवस्थित होते हैं, लेकिन संकीर्ण स्क्रीन पर, वे ऊर्ध्वाधर रूप से व्यवस्थित होते हैं।
फ्लेक्सबॉक्स और ग्रिड लेआउट
1/* Flex Example */
2.container {
3 display: flex;
4 flex-wrap: wrap; /* Allow elements to wrap */
5}
6
7.item {
8 flex: 1 1 200px; /* Each item has a minimum width of 200px */
9}
10
11/* Grid Example */
12.container {
13 display: grid;
14 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
15 gap: 16px;
16}CSS फ्लेक्सबॉक्स या ग्रिड का उपयोग करने से लचीले लेआउट समायोजन की अनुमति मिलती है। ये लेआउट तकनीकें प्रतिक्रियाशील डिज़ाइन के लिए उपयुक्त हैं क्योंकि वे स्क्रीन आकार के अनुसार लेआउट को स्वचालित रूप से समायोजित करना आसान बनाती हैं।
सारांश
प्रतिक्रियाशील डिज़ाइन एक महत्वपूर्ण विधि है यह सुनिश्चित करने के लिए कि उपयोगकर्ता जिस भी डिवाइस का उपयोग करें, वेबसाइट को आराम से देख सकें। मीडिया क्वेरीज़, लचीले लेआउट, फ्रेमवर्क और फ्लेक्सबॉक्स और ग्रिड जैसी नई लेआउट तकनीकों को मिलाकर, अधिक लचीली और अनुकूलनशील वेब पेज बनाए जा सकते हैं।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।