Media queries with CSS3

Media queries are for different style rules for different size devices such as mobiles, desktops, etc.

You can try to run the following code to implement media queries with CSS3 −

Example

<html>
   <head>
      <style>
         body {
            background-color: lightpink;
         }
         @media screen and (max-width: 420px) {
            body {
               background-color: lightblue;
            }
         }
      </style>
   </head>
   
   <body>
      <p>If screen size is less than 420px, then it will show lightblue color, 
      or else it will show light pink color</p>
   </body>
</html>

Updated on 30-Jul-2019 22:30:22

Media queries with CSS3

Example

Media queries with CSS3

Example

Annual Membership

Training for a Team