Syntax error Set Media Queries for different CSS style rules for different size devices

Set Media Queries for different CSS style rules for different size devices

To set media queries for different CSS style rules, you can try to run the following code −

Example

Live Demo

<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: 2020-06-29T08:30:19+05:30

295 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements