How Can We Help?
< All Topics

Media Queries

CSS media queries are a fundamental part of responsive web design. They allow you to apply different CSS styles based on the characteristics of the device or viewport size. By using media queries, you can create layouts and styles that adapt to different screen sizes, orientations, resolutions, and other device features. Here’s how to use media queries in CSS:

Syntax

Media queries are written using the @media rule, followed by a media type (such as screen or print) and one or more conditions. The conditions are defined within parentheses and can include various criteria, such as screen width, device orientation, pixel density, and more. Here’s the basic syntax:

@media media-type and (condition) {
  /* CSS rules for the specified condition */
}

Examples

Here are some common media query examples:

Targeting different screen widths:

@media (max-width: 768px) {
  /* CSS rules for screens up to 768px wide */
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* CSS rules for screens between 769px and 1024px wide */
}

@media (min-width: 1025px) {
  /* CSS rules for screens wider than 1024px */
}

Targeting different device orientations:

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

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

Targeting different device types:

@media (hover: hover) {
  /* CSS rules for devices that support hover interactions */
}

@media (pointer: coarse) {
  /* CSS rules for devices with touch screens */
}

Combining multiple conditions:

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

Usage Tips

  • Use min-width for designing from small screens up to larger ones, following the mobile-first approach.
  • Use max-width for designing from large screens down to smaller ones.
  • Test your media queries across different devices and screen sizes to ensure they behave as expected.

Media queries provide a powerful way to create responsive designs by tailoring your CSS styles to specific device conditions. By utilizing media queries effectively, you can optimize the layout and appearance of your website for different screens and devices, providing a seamless and user-friendly experience.

Certainly! Here are a few additional details and tips to further enhance your understanding of CSS media queries:

Media Types

In the syntax of media queries, you can specify the media type to target specific types of devices. Some common media types include:

  • all: Applies to all devices.
  • screen: Applies to screens and devices with visual output.
  • print: Applies when printing the web page.
  • speech: Applies to screen readers and speech synthesizers.

For example, you can target only screens with the following media query:

@media screen and (max-width: 768px) {
  /* CSS rules for screens up to 768px wide */
}

Breakpoints

Breakpoints in responsive design refer to specific screen widths at which the layout or styles change to accommodate different devices. Media queries are often used with breakpoints to define these changes. Here’s an example of a mobile-first approach using a common set of breakpoints:

/* Mobile-first styles */
/* Styles applied to screens up to 767px wide */

@media (min-width: 768px) {
  /* Tablet styles */
  /* Styles applied to screens from 768px wide */
}

@media (min-width: 992px) {
  /* Desktop styles */
  /* Styles applied to screens from 992px wide */
}

@media (min-width: 1200px) {
  /* Large desktop styles */
  /* Styles applied to screens from 1200px wide */
}

By defining styles for different breakpoints, you can create a responsive layout that adjusts gracefully across a range of screen sizes.

Mobile-First Approach

The mobile-first approach is a design philosophy where you start with the smallest screen size (mobile devices) and progressively enhance the layout and styles for larger screens. With this approach, you apply base styles that work well on small screens and use media queries to add additional styles and adjust the layout as the screen size increases.

By adopting a mobile-first approach, you ensure that your website is optimized for mobile devices and can adapt to larger screens, providing a better user experience across a variety of devices.

Testing and Debugging

When working with media queries, it’s essential to test your design across different devices and screen sizes to ensure that your styles are applied correctly. You can use browser developer tools to simulate various screen sizes and orientations and inspect how your styles respond to different conditions.

Additionally, be mindful of the order in which you write your media queries. Media queries are processed in the order they appear in your CSS file, so make sure to write more specific queries (e.g., targeting certain screen widths) before more general ones (e.g., targeting all screens).


CSS media queries provide a powerful mechanism to create responsive and adaptive designs. By understanding how to use media queries, specifying breakpoints, adopting a mobile-first approach, and testing your designs thoroughly, you can effectively build websites that respond and adapt to different devices and screen sizes.

Commonly used CSS media query tags and their descriptions:

Media Query Tag Description
all Applies to all devices.
screen Applies to screens and devices with visual output.
print This applies when printing the web page.
speech This applies to screen readers and speech synthesizers.
min-width Specifies the minimum width of the viewport.
max-width Specifies the maximum width of the viewport.
min-height Specifies the minimum height of the viewport.
max-height Specifies the maximum height of the viewport.
orientation Target specific device orientations. Values can be portrait or landscape.
aspect-ratio Matches the aspect ratio of the viewport.
min-aspect-ratio Specifies the minimum aspect ratio of the viewport.
max-aspect-ratio Specifies the maximum aspect ratio of the viewport.
device-aspect-ratio Matches the aspect ratio of the output device.
min-device-aspect-ratio Specifies the minimum aspect ratio of the output device.
max-device-aspect-ratio Specifies the maximum aspect ratio of the output device.
color Matches the number of bits per color component for the output device.
color-index Matches the number of entries in the color lookup table for the output device.
monochrome Matches the number of bits per pixel in a monochrome frame buffer for the output device.
resolution Specifies the resolution of the output device, typically in dots per inch (dpi) or dots per centimeter (dpcm).
hover Matches devices that support hover interactions.
pointer Matches devices based on the primary pointing device, such as a mouse or touch screen.
any-pointer Matches devices that have any pointing device.
hover Matches devices that support hover interactions.

These are just some examples of commonly used media query tags. CSS media queries provide a powerful toolset to target specific device conditions and create responsive designs. You can combine these tags with various conditions and values to precisely control how your styles are applied to different devices and viewport sizes.

Table of Contents