Responsive breakpoints s, m, l hindi in W3.css
वेबपेज वेबसाइट फॉर्मेट स्टाइलिंग डिज़ाइन डेवलपमेंट में W3.CSS एक इजी और लाइटवेट रेडीमेड CSS कॉम्पोनेन्ट फ्रेमवर्क लाइब्रेरी है. जो वेब डेवलपर को एक कस्टम रिस्पॉन्सिव वेब लेआउट स्ट्रक्चर डिज़ाइन डेवलप करने में हेल्प करता है। यह वेबपेज रेस्पोंसिवनेस्स फ्रेमवर्क ब्रेकपॉइंट का यूज़ करता है, जिससे कि वेबपेज एलिमेंट स्क्रीन साइज़ एडजस्टमेंट रेस्पोंसिवनेस्स के अनुसार मॉडिफाई कर सकें, जिससे यह डिफाइन होता है कि वेब डेवलपर डिज़ाइन डेवलप वेबसाइट सभी डिवाइस स्क्रीन साइज़ एडजस्टमेंट के अनुसार डिस्प्ले हो, जिसमे स्माल स्मार्टफोन, टेबलेट, लैपटॉप से लेकर लार्ज साइज के डेस्कटॉप मॉनिटर तक हो सकते है।
W3.CSS स्क्रिप्ट में, वेबपेज वेबसाइट स्क्रीन एडजस्टमेंट रिस्पॉन्सिव ब्रेकपॉइंट यूजर के यूज़ स्क्रीन की विड्थ पर टोटली डिपेंड होते हैं, और वेब डेवलपर उन्हें s, m, और l जैसे स्माल, मेडियम, लार्ज, क्लास से डिफाइन कर डिस्प्ले कर सकते है। ये स्क्रीन रेस्पोंसिवनेस्स एडजस्टमेंट ब्रेकपॉइंट वेब डेवलपर को यह कंट्रोल करने में हेल्प करते हैं कि वेबपेज में डिफाइन टेक्स्ट, डाटा, इनफार्मेशन, कंटेंट स्माल, मीडियम और लार्ज स्क्रीन पर कैसे डिस्प्ले हो।
Overview of breakpoints in W3.CSS scripts.
W3.CSS वेब डेवलपमेंट स्किप्ट में स्क्रीन रेस्पोंसिवनेस्स ब्रेकपॉइंट को कुछ इस तरह डिफाइन किया गया हैं.
- s – यह वेब डेवलपर द्वारा डिफाइन डिज़ाइन डेवलप वेबपेज एलिमेंट को स्माल स्क्रीन (सामान्य रूप से 600px से कम विड्थ के स्मार्टफोन) के अनुसार डिस्प्ले करता है।
- m – यह वेब डेवलपर द्वारा डिफाइन डिज़ाइन डेवलप वेबपेज एलिमेंट को मीडियम स्क्रीन साइज डिस्प्ले (सामान्य रूप से टैबलेट गैजेट्स और स्माल साइज लैपटॉप डिवाइस, जिनकी स्क्रीन विड्थ 600px और 900px के बीच डिफाइन हो) के अनुसार डिस्प्ले करता है।
- l – यह वेब डेवलपर द्वारा डिफाइन डिज़ाइन डेवलप वेबपेज एलिमेंट को लार्ज स्क्रीन (सामान्य रूप से 900px से अधिक विड्थ साइज के डेस्कटॉप) के अनुसार डिस्प्ले करता है।
W3.CSS वेब डेवलपर अपने वेबपेज में इन ब्रेकपॉइंट का यूज़ यह इंडीकेट करने में करता है कि किसी W3.CSS बेस्ड वेबपेज डिस्प्ले कॉलम, टेक्स्ट साइज़, या उसकी डिफ़ॉल्ट विज़िबिलिटी जैसे वेबपेज एलिमेंट मल्टीप्ल इंडिविजुअल स्क्रीन साइज़ के अनुसार कैसे डिस्प्ले होते हैं।
Using Responsiveness Screen Size Breakpoints for Grid Layouts in W3.CSS (w3-col class).
W3.CSS वेब डेवलपर सामान्य रूप से इन ब्रेकपॉइंट का सबसे कॉमन यूज़ ग्रिड लेआउट को डिफाइन करने में करता है। W3.CSS फ्रेमवर्क वेब डेवलपर को 12-कॉलम ग्रिड सिस्टम फीचर प्रोवाइड करता है। यहाँ वेब डेवलपर अपनी जरूरत के अनुसार s, m, और l W3.CSS क्लास का यूज़ करके इसे स्क्रीन साइज के अनुसार फिक्स कर सकते हैं कि मौजूदा मल्टीप्ल इंडिविजुअल स्क्रीन साइज इलेक्ट्रॉनिक डिवाइस के वेबपेज एलिमेंट को कितने कॉलम में डिस्प्ले होना चाहिए।
Example of a responsive column layout in a W3.CSS webpage.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let Explore W3.CSS Responsive Columns Attributes </title>
<!– Here we link W3.CSS –>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-container”>
<h2>Let Test Responsive Column W3.CSS Features </h2>
<div class=”w3-row”>
<!– Here we create column 1 screen size responsive block –>
<div class=”w3-col s12 m6 l4 w3-padding”>
<div class=”w3-card w3-padding w3-indigo”>
<h3>Css</h3>
<p>
CSS (Cascading Style Sheets) is used to style and design web pages.
It controls colors, fonts, spacing, borders, and layouts.
CSS makes websites responsive and attractive on different screen sizes.
</p>
</div>
</div>
<!– Here we create column 2 screen size responsive block –>
<div class=”w3-col s12 m6 l4 w3-padding”>
<div class=”w3-card w3-padding w3-red”>
<h3>Bootstrap</h3>
<p>
Bootstrap is a popular front-end framework for creating responsive websites.
It provides ready-made CSS classes for layouts, buttons, cards, forms, and navigation.
Bootstrap makes web development faster and easier across different screen sizes.
</p>
</div>
</div>
<!– Here we create column 3 screen size responsive block –>
<div class=”w3-col s12 m6 l4 w3-padding”>
<div class=”w3-card w3-padding w3-yellow”>
<h3>W3.CSS</h3>
<p>
W3.CSS is a modern and easy-to-use CSS framework for designing web pages.
It provides ready-made classes for layouts, colors, cards, buttons, and responsive designs.
</p>
</div>
</div>
<!– Here we create column 4 screen size responsive block –>
<div class=”w3-col s12 m6 l4 w3-padding”>
<div class=”w3-card w3-padding w3-orange”>
<h3>Html</h3>
<p>
Now You can grow and shrink the web browser to see the responsive column behaviour.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Explanation of a responsive column layout in a W3.CSS webpage.
- यहाँ इस एक्साम्प्ल में स्माल स्क्रीन (s12) पर हर वेबपेज कॉलम रो की विड्थ 100% फुल विड्थ में डिस्प्ले होगी।
- मीडियम स्क्रीन साइज में (m6) पर, हर वेबपेज कॉलम रो की विड्थ का 50% में डिस्प्ले होगी।
- बड़ी स्क्रीन साइज में (l4) पर, हर वेबपेज कॉलम रो की चौड़ाई का 33.33% में डिस्प्ले होगी।
- इस तरह, W3.CSS वेबपेज लेआउट स्क्रीन साइज़ के आधार पर आटोमेटिक एडजस्ट हो जाता है।
Use of responsive visibility (w3-show, w3-hide classes) in W3.CSS.
W3.CSS वेब फॉर्मेटिंग स्क्रिप्ट में वेब डेवलपर वेबपेज एलिमेंट्स की डिफ़ॉल्ट विज़िबिलिटी बिहैवियर को कंट्रोल या मैनेज करने के लिए स्क्रीन साइज रेस्पोंसिवनेस्स ब्रेकपॉइंट का भी यूज़ कर सकते हैं। W3.CSS में w3-show, w3-hide classes क्लासेस वेब डेवलपर को मल्टीप्ल इंडिविजुअल स्क्रीन साइज़ पर किसी वेबपेज वेबसाइट एलिमेंट कंटेंट को शो और हाइड करने में हेल्प करते हैं।
Example of showing and hiding a W3.CSS webpage element.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let Explore W3.CSS Responsive Display Features</title>
<!– Here we link W3.CSS –>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-container”>
<h2>Let Test Responsive Column Display Behaviour</h2>
<div class=”w3-row”>
<!– Here below column only visible on small screens device –>
<div class=”w3-col s12 w3-hide-medium w3-hide-large”>
<div class=”w3-card w3-padding w3-red”>
<h3>Small Screen Display</h3>
<p>This W3.CSS column only display on small screen device gadgets. </p>
</div>
</div>
<!– Here below column only visible on medium screens device –>
<div class=”w3-col m6 w3-hide-small w3-hide-large”>
<div class=”w3-card w3-padding w3-teal”>
<h3>Medium Screen Display </h3>
<p>This W3.CSS column only display on medium screen device gadgets. </p>
</div>
</div>
<!– Here below column only visible on large screens device –>
<div class=”w3-col l6 w3-hide-small w3-hide-medium”>
<div class=”w3-card w3-padding w3-indigo”>
<h3>Large Screen Display </h3>
<p>This W3.CSS column only display on large screen device gadgets. </p>
</div>
</div>
</div>
</div>
</body>
</html>
Explanation of showing and hiding a W3.CSS webpage element.
- Small screen (s12) – यहाँ इस एक्साम्प्ल में फर्स्ट कॉलम सिर्फ़ स्माल स्क्रीन स्मार्टफोन डिवाइस पर ही डिस्प्ले होगा। यह कॉलम मीडियम और लार्ज स्क्रीन साइज पर हाइड रहेगा।
- Medium screen (m6) – यहाँ सेकंड कॉलम मीडियम स्क्रीन पर डिस्प्ले होगा और स्माल और लार्ज स्क्रीन साइज पर हाइड रहेगा।
- Large screen (l6) – थर्ड कॉलम सिर्फ़ लार्ज स्क्रीन साइज पर डिस्प्ले होगा।
Showing and hiding W3.CSS classes.
- w3-hide-small – यह मौजूदा वेबपेज एलिमेंट को स्माल स्क्रीन साइज (<600px) पर हाइड करता है।
- w3-hide-medium – यह मौजूदा वेबपेज एलिमेंट को मीडियम स्क्रीन साइज (600px – 900px) पर हाइड करता है।
- w3-hide-large – यह मौजूदा वेबपेज एलिमेंट को लार्ज स्क्रीन साइज (>900px) पर हाइड करता है।
- w3-show-small – यह मौजूदा वेबपेज एलिमेंट को स्माल स्क्रीन साइज पर डिस्प्ले करता है।
- w3-show-medium – यह मौजूदा वेबपेज एलिमेंट को मीडियम स्क्रीन साइज पर डिस्प्ले करता है।
- w3-show-large – यह मौजूदा वेबपेज एलिमेंट को लार्ज स्क्रीन साइज पर डिस्प्ले करता है।
Responsive typography concept in W3.CSS web development script.
वेब डेवलपर नीचे दिए गए W3.CSS क्लास को अप्लाई करके वेबपेज की स्क्रीन साइज़ के अनुसार वेब एलिमेंट टेक्स्ट का फ़ॉन्ट साइज़ मॉडिफाई कर सकते हैं.
- w3-small – यह मौजूदा वेबपेज में टेक्स्ट कंटेंट साइज को स्माल बनाता है।
- w3-medium – यह मौजूदा वेबपेज में डिफ़ॉल्ट मीडियम साइज़ का टेक्स्ट (नॉर्मल) में डिस्प्ले करता है।
- w3-large – यह मौजूदा वेबपेज में टेक्स्ट साइज को लार्ज करता है।
आप इन क्लास को रिस्पॉन्सिव टाइपोग्राफी के लिए स्क्रीन साइज़ ब्रेकपॉइंट के साथ ग्रुप कर सकते हैं।
Example of responsive text size in W3.CSS.
<p class=”w3-small w3-medium w3-large”>
Here This webpage text size will grow and shrik based on the screen size.
</p>
Explanation of responsive text size in W3.CSS.
- यहाँ इस एक्साम्प्ल में स्माल स्क्रीन (s) पर, वेबपेज टेक्स्ट स्माल साइज (w3-small) में प्रीव्यू होगा।
- यहाँ मीडियम स्क्रीन साइज में (m) पर, वेबपेज टेक्स्ट का साइज़ मीडियम (w3-medium) आर्डर में प्रीव्यू होगा।
- इसमें लार्ज स्क्रीन साइज़ (l) पर, टेक्स्ट बड़ा (w3-large) स्क्रीन टेक्स्ट डिस्प्ले होगा।
Responsive Container Features in W3.CSS.
W3.CSS वेब डेवलपमेंट स्क्रिप्ट वेब डेवलपर को मल्टीप्ल इंडिविजुअल स्क्रीन साइज के अनुसार पर किसी वेबपज कंटेनर की डिफ़ॉल्ट विड्थ को एडजस्ट या कस्टमाइज करने के फीचर्स प्रोवाइड करता है। वेब डेवलपर अपने वेबपेज कंटेंट के लेआउट को कंट्रोल और मैनेज करने के लिए w3-container, w3-padding, और ब्रेकपॉइंट जैसी क्लास का यूज़ कर सकते हैं।
Example of a responsive container in W3.CSS.
<div class=”w3-row”>
<div class=”w3-col s12 m6 l4″>
<div class=”w3-card w3-padding w3-container”>
Here the Content inside a webpage behave as a responsive container behaviour according to multiple screen size
</div>
</div>
</div>
Explanation of a responsive container in W3.CSS.
यहाँ इस एक्साम्प्ल में, यूजर डिफाइन वेबपेज कंटेनर की विड्थ स्क्रीन साइज़ के अनुसार आटोमेटिक एडजस्ट होगी।
- On a small screen (s12) – इसमें वेबपेज कंटेनर रो की विड्थ का 100% पोरशन को डिस्प्ले करता है।
- On a medium screen (m6) – इसमें वेबपेज कंटेनर रो की विड्थ का 50% पोरशन को डिस्प्ले करता है।
- On a large screen (l4) – इसमें वेबपेज कंटेनर रो की विड्थ का 33.33% पोरशन को डिस्प्ले करता है।
Breakpoints Summary in W3.CSS.
| W3.CSS Class | Default Screen Size Support | Screen Width Adjustment |
| s12 | It displays webpage content block in small screens like smartphone | It supports less than 600px screen size |
| m6 | It displays webpage content block in medium screens like tablet, small screen laptop or notebook | It supports between 600px and 900px screen size |
| l4 | It displays webpage content block in large screens like tablet, large desktop, big monitor scree size | It supports greater than 900px screen size |
Additional example of the complete layout in W3.CSS.
तो चलिए यहाँ हम एक डिटेल्ड रिस्पॉन्सिव ब्रेकपॉइंट्स फीचर्स को एक साथ यूज़ करके पूरी तरह से एक रिस्पॉन्सिव वेबपेज कैसे बनाया जा सकता है, ये बेहतर जाने।
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<title>Lets Explore Responsive Column Layout with W3.CSS</title>
</head>
<body>
<div class=”w3-container w3-yellow w3-padding”>
<h2>Lets Analyse Responsive Layout Structure with W3.CSS </h2>
<!– Here we create column row with responsive columns behaviour–>
<div class=”w3-row”>
<div class=”w3-col s12 m6 l3″>
<div class=”w3-card w3-padding w3-teal w3-margin”>First Column Block Element </div>
</div>
<div class=”w3-col s12 m6 l3″>
<div class=”w3-card w3-padding w3-pink w3-margin”>Second Column Block Element</div>
</div>
<div class=”w3-col s12 m6 l3″>
<div class=”w3-card w3-padding w3-aqua w3-margin”>Third Column Block Element</div>
</div>
<div class=”w3-col s12 m6 l3″>
<div class=”w3-card w3-padding w3-white w3-margin”>Fourth Column Block Element</div>
</div>
</div>
<!– Here we display only on medium and large screens column behaviour –>
<div class=”w3-row w3-show-medium w3-red w3-show-large”>
<div class=”w3-card w3-padding”>This block display on medium and large screens size only</div>
</div>
</div>
</body>
</html>
