CSS3 Topics

CSS3 Media Queries

April 09, 2021

 

What is The Viewport?

Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.

Setting The Viewport

HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.

You should include the following <meta> viewport element in all your web pages:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This gives the browser instructions on how to control the page's dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag


CSS Media Types :

  • All                                          -  @media all and (max-width:500px) {}
  • Print                                        - @media print {}
  • Screen                                     - @media screen and (max-with:500px){}
  • speech

CSS Logical Operators  :

  • And
  • Not
  • Only

Source Code,
Here in this example we applied some Media Queries to one box , it had some different view port examples , for this example i applied CSS to this HTML Element..

CSS Should have this kind of code..

       
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

            <style>

                .boxOne{
                    width: 950px;
                    height: 450px;
                    background-color: gray;
                }

                @media(min-width:500px) and (max-width: 700px){
               
                .boxOne{
                    width: 200px;
                    height: 450px;
                    background-color: blue;
                }

            }

                @media(max-width: 500px){
               
                .boxOne{
                    width: 300px;
                    height: 150px;
                    background-color: orange;
                }

            }
   </style>

  </head>

this is HTML Code..

   
    <body>
       
        <div class="boxOne"></div>

    </body>
   


 Media Queries  (Break Points)