It is essential to make your website look great on every device. CSS media queries are one key tool that allows you to apply different styles based on the device's characteristics, such as its width, height, orientation, or resolution.

image by Jakub Zerdzicki

1. What Are CSS Media Queries?

CSS media queries are a feature of CSS that lets you apply styles based on conditions (or “media features”) such as screen width, height, resolution, and more. They enable you to adjust your layout and styles to suit different devices, from mobile phones to large desktop monitors.

Basic Syntax:

@media media-type and (media-feature: value) {

/* CSS rules go here */

}

Media Types: Although you can specify media types like screen, print, or all, most responsive designs use screen or simply omit the type.
Media Features: Common media features include min-width, max-width, orientation, and resolution.

For example, to change the background color of the body for devices with a maximum width of 600px, you would write:

@media only screen and (max-width: 600px) {

body {

background-color: lightblue;

}

}

2. How Media Queries Work

Media queries work by testing the conditions you set. If the conditions are met, the enclosed CSS rules are applied. This makes it easy to create "breakpoints" where your layout adjusts to the screen size.

Example: Basic Breakpoints

Let’s say you want three different layouts:

Mobile: For screens up to 400px wide.
Tablet: For screens between 401px and 960px.
Desktop: For screens wider than 960px.

You could set up your media queries like this:

/* Mobile Styles */

@media only screen and (max-width: 400px) {

body {

background-color: #f09a9d;

}

}

/* Tablet Styles */

@media only screen and (min-width: 401px) and (max-width: 960px) {

body {

background-color: #f5cf8e;

}

}

/* Desktop Styles */

@media only screen and (min-width: 961px) {

body {

background-color: #b2d6ff;

}

}

When you resize your browser, the background color changes according to the current viewport width, demonstrating how media queries adapt your design to different devices.

3. Practical Examples

A. Responsive Typography

Responsive typography is a common use case for media queries. Instead of hardcoding font sizes, you can adjust them based on screen size:

/* Base styles for typography */

h1 {

font-size: 2rem;

}

/* Larger screens: Increase heading size */

@media only screen and (min-width: 961px) {

h1 {

font-size: 3rem;

}

}

In this example, headings will scale up on larger screens to maintain readability and design aesthetics.

B. Responsive Layout Adjustments

Media queries are also useful for rearranging layout elements. For instance, you might stack columns on mobile but display them side-by-side on desktop:

/* Base (mobile) layout: single column */

.container {

display: block;

}

/* Desktop layout: two columns */

@media only screen and (min-width: 961px) {

.container {

display: flex;

}

.sidebar {

flex: 1;

}

.content {

flex: 2;

}

}

Here, the layout defaults to a single column for narrow screens and switches to a flexbox layout with a sidebar and content area on wider screens.

4. Best Practices for Media Queries

Mobile-First Approach: First, design for mobile devices, then add media queries to enhance the design for larger screens. This ensures your website works well on the smallest devices.
Use Relative Units: Combine media queries with relative units (like percentages, ems, and rems) to create fluid layouts that adapt gracefully to any screen size.
Keep It Simple: Avoid writing overly complex media queries. Focus on key breakpoints that address the most common screen sizes.
Test Across Devices: Always test your responsive design on multiple devices or use browser developer tools to simulate various screen sizes.

5. Conclusion

CSS media queries are an essential part of responsive web design. By applying conditional styles based on device characteristics, you can ensure that your website looks and works great on any screen—whether it’s a mobile phone, tablet, or desktop.

Learn more about media queries here