CSS
Media Queries

Media queries are used when the site or app need to be modified according to a device’s general type.

Media Query Breakdown

Here is the breakdown of Media Queries

Media Query Example

Below example will demonstrate the basic architecture of Media Queries

Copy Code 


<!doctype html>  
<html>
    <head>
        <title>...</title>
        <style> 
            @media screen and (min-width: 480px) {
                body {
                    background-color: #007bff;
                }
            }  

          @media screen and (min-width: 600px) {
              body {
                  background-color: #343a40;
                  color: #fff;
              }
          }
        </style> 
    </head>
  
    <body>
        $lt;h1>PHPDocs$lt;/h1>
        $lt;p>Resize the window and see the magic$lt;/p>
    </body>
</html>