Media Queries in CSS in hindi

कोई भी वेबसाइट या कोई वेब एप्लीकेशन या कोई वेब पेज जब मोबाइल पर खोला जाता है, तो एक तरह से दिखता है और जब कंप्यूटर डेस्कटाप या लैपटाप पर खोला जाता है,तो दूसरी तरह से दिखता है। आइए इसके दिखने के तरीके पर चर्चा करते हैं।

What are Media Queries in CSS?

आज के समय में कई तरह की devices उपयोग हो रही हैं जैसे -लैपटाप, मोबाइल, टेबलेट आदि। किसी भी वेब पेज को सभी devices पर सही से दिखाना web developer के लिए एक चुनौती भरा काम होता है। इस काम को आसान करने के लिए css में कई तरह की styles लगायी जाती हैं। यही styles css की media queries होती हैं।

Use of Media Queries in real life

Real-life में media queries के द्वारा एक ही वेब फाइल को अलग-अलग प्लेटफार्म पर दिखाने के लिए काफी styles की जरूरत पड़ती है। Media Queries की उपयोगिता को निम्नलिखित बातों को ध्यान में रखकर समझा जा सकता है-

1. Small Devices(phones, Upto 425px )

2. Devices (Portrait Tablets and big phones, Upto 767px)

3. Landscapes tablets (768px and upto 1023)

4. Large devices (Laptop and desktop, starting from 1024px)

5. Large laptops and desktop(min width 1440px)

How to write code for media query in html and css?

उदाहरण के लिए वेबपेज के लिए background colour set करना है, जिनकी चौड़ाई इस तरह हैं-

1. Small Devices(phones, Upto 425px )

2. Devices (Portrait Tablets and big phones, Upto 767px)

3. Landscapes tablets (768px and upto 1023)

4. Large devices (Laptop and desktop, starting from 1024px)

5. Large laptops and desktop(min width 1440px)

Html:

<div class="box">
        <h3>This is a Media Query demo page</h3>
        <p></p>
    </div>

CSS:

*{margin:0;
        padding:0;}
        h3,p{
            text-align: center;
        }
        .box{
            width:100vw;
            height: 100vh;
            background-color: red;

        }
        @media screen and (max-width:425px) {

            p::after{
                content:"Screen size: 425px";
            }
        }
        @media screen and (min-width:426px) {
             p::after{
                content:"Screen size: 768px";
            }
            .box{
                background-color: aqua;
            }
        }
        @media screen and (min-width:769px) {

            p::after{
                content:"Screen size: 1024px";
            }
            .box{
                background-color: rgb(138, 114, 17);
            }
        }
        @media screen and (min-width:1025px) {

            p::after{
                content:"Screen size: 1440px";
            }
            .box{
                background-color: green;
            }
        }
        @media screen and (min-width:1441px) {

            .box{
                background-color: aquamarine;
            }
            p::after{
                content:"";
            }

        }

Output:

इसके आउटपुट को देखने के लिए पेज ब्राउजर पर खुलने पर right click करके inspect करें। फिर दाहिन साइड में मोबाइल जैस दिखने वाले आइकान responsive design mode पर क्लिक करें। और फिर माउस से drag करके screen size कम ज्यादा करें।

Frame1:

Frame2:

Frame 3:

Frame 4:

Frame 5:

Assignment करने के लिए अगले ब्लाग पर आएं।