What is Media Query in CSS Hindi Tutorial

by
Table of Contents hide
1 CSS Media Queries क्या है
1.1 mediatype
1.2 media queries dimension
1.3 media queries logic operators
2 अन्य CSS3 सुझाव

CSS Media Queries क्या है

media query एक css3 का property है | इसके जरिये अलग अलग screen-resolution के लिए एक website को अलग अलग style दिया जा सकता है | ये website को responsive बनाने में मदद करता है |

हर device का dimension अलग होता है | इसीलिए media-query property के जरिये device के हिसाब से website सेट की जाती है | यानीmedia query के जरिए अलग device dimensions के लिए CSS Classes define करके, हर एक खास dimension पे कोई खास CSS लगा सकतें हैं |

@media keyword के जरिए एक particular dimension पे CSS classes लिखी जाती है |

Syntax:

@media <mediatype> and (dimension){
    .....
  }

mediatype

mediatype में हमे बताना पड़ता है हम किस media के लिए css classes लगाना चाहतें हैं और इसकी values है:

  • screen – सारे color screen इसमें आता है जैसे की mobile, tab, laptop, desktop की screen |
  • all – ये सारे media types को cover कर लेता है |
  • speech – screen readers media type इसमें आता है जो screen को read करता है |
  • Handheld – इसमें सारे small screen projections आते हैं |
  • Print – ये print devices को indicate करता है |

media queries dimension

media queries अलग अलग dimensions के लिए कुछ properties set की गयी है और वो है:

  • Min-width
  • Min-height
  • Max-height
  • Max-width

media queries logic operators

media queries में logic operators के जरिये हम condition लगा सकतें हैं की हम कोनसे range में क्या css लगाना चाहतें हैं और वो operators हैं:

  • and
  • not
  • only

उदाहरण

<!DOCTYPE html>
<html lang="en">
 <head>
    <title>Media Query Example</title>
    <style>
        body{
            background-color: #ccc;
        }
        @media screen and (max-width:1100px)
        {
            body{
                background-color: blue;
            }
        }
        @media screen and (max-width:800px)
        {
            body{
                background-color: pink;
            }
        }
        @media screen and (max-width:500px)
        {
            body{
                background-color: palegreen;
            }
        }
    </style>
 </head>
 <body>
    <h1>Media Query</h1>
 </body>
</html>

उदाहरण में हमने <body> tag में अलग screen size पे अलग background color लगाया है | जैसे ही browser screen उस width पे पहोंचेगी background color बदलती जायेगी |

अन्य CSS3 सुझाव