CSS Media Queries

CSS media queries are an essential tool for building responsive websites. They allow you to apply different styles to different devices, ensuring that your website looks great on everything from large desktop monitors to small mobile screens. Media queries give your web design the flexibility to adapt based on the user’s device, screen size, resolution, orientation, and even print layout.

What Are Media Queries?

Media queries allow you to apply CSS rules only when certain conditions are met. These conditions can be based on various features of the user’s device, like its screen width, height, resolution, and more. With media queries, you can:

Adjust layouts and styles based on the screen size.
Apply specific styles for print or other media types.
Create responsive designs without needing multiple style sheets.

Basic Syntax

@media media-type and (condition) { /* CSS rules go here */ }

The media-type can be:

screen: Used for devices with screens like desktops, tablets, and smartphones.
print: Used for print previews and printing web pages.
speech: Used for screen readers.

The condition can check for features such as:

Screen width (min-width, max-width)
Screen height (min-height, max-height)
Orientation (landscape, portrait)
Resolution (min-resolution, max-resolution)

An example of a simple media query targeting screens with a width of 600px or less:

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

In this example, the layout will switch to a column format when the screen width is 600px or less, ideal for mobile devices.

Media Query Breakpoints

Breakpoints are specific widths (or heights) where your layout will change. They help ensure your design looks great on various screen sizes, including desktops, tablets, and smartphones. Common breakpoints:

1200px or higher: Extra large devices (desktops)
992px – 1200px: Large devices (tablets in landscape mode)
768px – 992px: Medium devices (tablets in portrait mode)
600px – 768px: Small devices (large smartphones)
480px or lower: Extra small devices (smartphones)

Example:

/* For small screens (600px and down) */ @media screen and (max-width: 600px) { body { background-color: lightblue; } } /* For tablets (between 600px and 768px) */ @media screen and (min-width: 601px) and (max-width: 768px) { body { background-color: lightgreen; } } /* For desktops (768px and above) */ @media screen and (min-width: 769px) { body { background-color: lightcoral; } }

In this example, the background color changes based on the screen width. This is a simple way to visually adapt your page across devices.

Advanced Media Query Features

1. Orientation

Orientation allows you to apply different styles depending on whether the device is in portrait (vertical) or landscape (horizontal) mode. This is especially useful for tablets and smartphones that users often rotate.

Example:

@media screen and (orientation: landscape) { .container { flex-direction: row; } }

In landscape orientation, the layout changes to a row format.

2. Resolution

The min-resolution and max-resolution properties allow you to target devices with specific resolutions. This is often used to optimize for high-DPI (Retina) displays.

Example:

@media screen and (min-resolution: 300dpi) { .high-res-image { background-image: url(‘high-res.jpg’); } }

In this example, a high-resolution image is used for devices with a resolution of 300dpi or higher.

3. Aspect Ratio

Aspect ratio conditions allow you to apply styles based on the ratio of the width to the height of the device’s screen. This can be useful for adapting videos or images.

Example:

@media screen and (min-aspect-ratio: 16/9) { .video-container { width: 100%; height: auto; } }

This ensures that the video container maintains the correct aspect ratio.

4. Combining Multiple Conditions

You can combine multiple media features using and, or, and not to create more specific queries. This gives you precise control over when to apply styles.

Example:

@media screen and (min-width: 768px) and (orientation: landscape) { .container { grid-template-columns: 1fr 1fr; } }

Here, the layout changes to a two-column grid only when the screen is 768px or wider and the device is in landscape mode.

Adjusting font sizes and spacing for different devices ensures better readability and an optimal user experience. Media queries can help you tailor typography across devices.

Example:

@media screen and (max-width: 600px) { h1 { font-size: 1.5rem; } } @media screen and (min-width: 600px) { h1 { font-size: 2rem; } } @media screen and (min-width: 1024px) { h1 { font-size: 2.5rem; } }

In this example, the font size of h1 adapts based on the screen size, ensuring text remains readable without overwhelming the layout.

Using Media Queries for Print

Media queries can also be used to format your content for printing. You can hide unnecessary elements, change the layout, or adjust the font size for optimal printing results.

Example:

@media print { .no-print { display: none; } body { font-size: 12pt; } }

In this case, any elements with the class no-print will be hidden when the page is printed, and the font size will be adjusted for print readability.

Request more information

CSS Media Queries