Show List
Tutorials > CSS > CSS Media Queries

CSS Media Queries

CSS Media Queries allow you to apply different styles to a web page based on the characteristics of the device or screen that is rendering the page. This allows you to create responsive designs that adjust to different screen sizes and orientations.

Here are some basic examples of using CSS Media Queries:

  1. Screen Width: To apply styles based on the screen width, you can use the max-width or min-width media query. For example:
@media (max-width: 767px) {
   body {
      background-color: lightblue;
   }
}

@media (min-width: 768px) {
   body {
      background-color: lightgray;
   }
}
  1. Screen Height: To apply styles based on the screen height, you can use the max-height or min-height media query. For example:
@media (max-height: 499px) {
   body {
      background-color: lightblue;
   }
}

@media (min-height: 500px) {
   body {
      background-color: lightgray;
   }
}
  1. Orientation: To apply styles based on the screen orientation, you can use the orientation media query. For example:
@media (orientation: portrait) {
   body {
      background-color: lightblue;
   }
}

@media (orientation: landscape) {
   body {
      background-color: lightgray;
   }
}
  1. Combining Media Queries: You can also combine multiple media queries to apply styles based on multiple conditions. For example:
@media (max-width: 767px) and (orientation: portrait) {
   body {
      background-color: lightblue;
   }
}

@media (min-width: 768px) and (orientation: landscape) {
   body {
      background-color: lightgray;
   }
}
These are just a few examples of using CSS Media Queries. With Media Queries, you can create responsive designs that provide an optimal user experience on different devices and screen sizes.


Next: Quiz - CSS - 1

    Leave a Comment

  • captcha text