What are Media Queries?#

Media queries are a CSS feature that allows you to apply styles based on the characteristics of the device or viewport. They are commonly used to create responsive designs that adapt to different screen sizes.

Basic Syntax#

The basic syntax of a media query is as follows:

@media (condition) {
  /* CSS rules */
}

Common Media Query Conditions#

@media (max-width: 600px) {
  /* Styles for screens smaller than 600px */
}

@media (min-width: 601px) {
  /* Styles for screens larger than 600px */
}

@media (max-height: 800px) {
  /* Styles for screens shorter than 800px */
}

@media (min-height: 801px) {
  /* Styles for screens taller than 800px */
}

@media (orientation: portrait) {
  /* Styles for portrait orientation */
}

@media (orientation: landscape) {
  /* Styles for landscape orientation */
}

Combining Conditions#

You can combine multiple conditions using logical operators like and, or, and not.

@media (min-width: 600px) and (max-width: 1200px) {
  /* Styles for screens between 600px and 1200px */
}

@media not all and (min-width: 600px) {
  /* Styles for screens smaller than 600px */
}

Practical Examples#

body {
  font-size: 16px;
}

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

.container {
  display: flex;
  flex-direction: row;
}

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

Conclusion#

Media queries are a powerful tool for creating responsive designs that adapt to different screen sizes and orientations. By understanding the basic syntax and common conditions, you can start using media queries to create flexible and responsive layouts.

For more information, check out the MDN Web Docs on Media Queries.