CSS RWD Media Queries

Media queries are an essential feature in Responsive Web Design (RWD). They allow developers to apply CSS rules based on specific conditions, such as screen size, orientation, and resolution. This technique ensures that web pages look great and function seamlessly across a wide range of devices, from desktops to smartphones.

01. What Are Media Queries?

Media queries are a CSS feature that enables the application of conditional styles. Using media queries, developers can test for certain conditions of the user’s device and then apply styles accordingly. This makes it easier to build responsive layouts that adapt to various screen sizes and devices.

Example: Basic Media Query


@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

In this example, the background color changes to light blue when the screen width is 768px or smaller.

02. Syntax of Media Queries

The basic syntax of a media query is as follows:


@media [media-type] ([feature]) {
  /* CSS rules */
}

Key components include:

Media Type: Specifies the type of device, such as all, screen, or print. If omitted, it defaults to all.
Feature: Defines the condition being tested, such as min-width, max-width, or orientation.

Example: Media Query with Media Type


@media screen and (max-width: 1024px) {
  body {
    font-size: 16px;
  }
}

This query applies styles only when the media type is screen and the viewport width is 1024px or less.

03. Common Media Features

Media queries support a variety of features. Here are some commonly used ones:

Media Feature	Description	Example
`min-width`	Applies styles when the viewport width is greater than or equal to the specified value.	`@media (min-width: 600px)`
`max-width`	Applies styles when the viewport width is less than or equal to the specified value.	`@media (max-width: 1200px)`
`orientation`	Applies styles based on the device orientation, either `portrait` or `landscape`.	`@media (orientation: portrait)`
`resolution`	Applies styles based on the screen resolution.	`@media (min-resolution: 2dppx)`

04. Responsive Design with Media Queries

Media queries are crucial for implementing responsive designs. By defining breakpoints, developers can ensure layouts adapt to different screen sizes. A breakpoint is a specific viewport width at which the design changes.

04.1. Example: Responsive Layout with Breakpoints


/* Default styles */
body {
  font-size: 18px;
}

/* For tablets */
@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

/* For mobile phones */
@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
}

05. Advanced Media Query Techniques

Combine multiple conditions using logical operators like and, or, and not to create more specific queries.

05.1. Combining Conditions


@media (min-width: 600px) and (max-width: 1200px) {
  body {
    background-color: lightgray;
  }
}

This query applies styles only for viewports between 600px and 1200px wide.

05.2. Excluding Styles


@media not all and (min-width: 800px) {
  body {
    background-color: lightcoral;
  }
}

This query excludes styles for viewports 800px wide or larger.

06. Testing Media Queries

Here are tips to test and debug media queries:

Browser DevTools: Use the responsive design mode in browser developer tools to test various screen sizes.
Emulators: Test layouts on emulators or real devices for accuracy.
Fallback Styles: Provide default styles for unsupported scenarios.

07. Best Practices for Media Queries

Follow these best practices to write efficient and maintainable media queries:

Start with a mobile-first approach and progressively enhance for larger screens.
Use relative units like em or rem for better scalability.
Avoid overusing breakpoints—focus on major design changes.

08. Conclusion

Media queries are a fundamental tool for creating responsive and adaptive web designs. By understanding their syntax, features, and applications, developers can ensure their websites provide an optimal user experience across all devices. With modern browser support, media queries are a reliable and essential component of CSS.

CSS Responsive Web Design Media Queries