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 −


Live Demo

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