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

304 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements