Media Queries in CSS

Media queries in CSS

Media queries are a CSS technique that allows you to define different styles for different devices and screen sizes. With media queries, you can create a responsive website that automatically adapts to different devices such as smartphones, tablets and desktops.

Media queries work by adding a condition that checks for screen size or device type and then applying different styles based on that condition. You can use media queries to change content width, text size, background color and much more.

There are several ways to write a CSS media query, but the most common is to use the keyword "media" followed by a condition. See an example:

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

In this example, the condition is "min-width: 768px", which means that styles within the media query will be applied to screens with a minimum width of 768 pixels. You can use other conditions, such as "max-width" for screens smaller than a certain size or "orientation" for devices in portrait or landscape orientation.

In addition, you can combine multiple conditions to create more complex media queries. For example:

@media (min-width: 768px) and (orientation: landscape) {
  /* Styles for screens larger than 768px in landscape orientation */
}

In this example, the condition is "min-width: 768px" and "orientation: landscape", which means that the styles within the media query will be applied to screens with a minimum width of 768 pixels and in landscape orientation.

Media queries are a powerful tool to create responsive websites that adapt to different devices. With them, you can ensure that your site is easy to use and navigate, no matter what device the user uses.

Next page of the Free Ebook:

31css preprocessors

2 minutes