Ultimate Guide to CSS Media Queries

What Are CSS Media Queries? CSS media queries are rules that let your website detect the type of device or screen size being used and apply specific styles accordingly. It’s how modern websites adapt to phones, tablets, laptops, and desktops.

Step-by-Step: Basic Media Query Example Let’s create a simple webpage that changes its background color and font size on smaller screens. This is perfect for beginners.

1. Create an HTML File: Save this as index.html:

2. Create a CSS File: Save this as styles.css:

3. Test It:

• Open index.html in a browser.
• Resize the browser window or use developer tools (right-click > Inspect > Toggle Device Toolbar) to simulate a mobile screen (e.g., 768px or less).
• Notice the background turns light gray, and the font size shrinks.

Why Are Media Queries Important? Today’s users access websites from various screen sizes. Media queries help ensure your site looks great and functions well everywhere. Without them, your layout may break or be hard to use on smaller screens.

Common Breakpoints to Use: While you can customize breakpoints based on your needs, here are some commonly used ones:

• max-width: 480px (Mobile phones)
• max-width: 768px (Tablets)
• max-width: 1024px (Small laptops)
• min-width: 1200px (Large screens)

How to Write Media Queries: Media queries use logical expressions to apply styles only if conditions are true. You can check screen width, orientation, resolution, and more. Below are different ways to use media queries with step-by-step examples.

Example 1: Mobile-First Approach with Min-Width The mobile-first approach starts with base styles for smaller screens and progressively adds styles for larger screens using min-width.

1. Update Your CSS: Modify styles.css to use a mobile-first approach:

2. Test It:

• Open index.html in a browser.
• Resize the window or use developer tools to simulate a tablet or desktop (768px or wider).
• The background should change to white, and the font size should increase.

Example 2: Combining Conditions You can combine conditions like width and orientation for more specific styling.

1. Add to Your CSS: Update styles.css with:

2. Test It:

• Open index.html in a browser.
• Use developer tools to simulate a tablet (e.g., 768px) in landscape orientation.
• The background should turn light green, and the font size should increase.

Example 3: Media Types Media queries can target different media types like screen, print, or all.

1. Add Print Styles: Update styles.css to style the page differently when printed:

2. Test It:

• Open index.html in a browser.
• Use the browser’s print preview (File > Print or Ctrl+P).
• The page should have a white background, black text, and a 12pt font size.

Example 4: Feature Queries Use @supports to check if a browser supports a CSS feature, like display: flex.

1. Add to Your HTML: Update index.html to include a flex container:

2. Add Feature Query: Update styles.css with:

3. Test It:

• Open index.html in a modern browser (e.g., Chrome, Firefox) that supports flexbox.
• The items should display in a row, spaced evenly.
• Test in an older browser (if available) to see the fallback block layout.

Using Developer Tools to Test Media Queries

You can use browser developer tools to test how your media queries work across different screen sizes. Here’s how:

1. Open Developer Tools:

• Right-click anywhere on your webpage and select "Inspect".

2. Toggle Device Toolbar:

• In the developer tools, click the device icon (a rectangle and phone) to enter responsive mode.
• Resize the viewport or select a device preset (e.g., iPhone, iPad) to test your media queries.
• Watch how your styles change as the screen size adjusts.

Best Practices for Media Queries

• Use mobile-first design: Start with base styles for small screens, then add media queries for larger devices.
• Keep breakpoints meaningful based on content layout, not specific devices.
• Avoid too many breakpoints — test with real devices or emulator tools.
• Group related queries together to improve readability.

Common Pitfalls to Avoid

• Don’t hardcode device widths—new devices come out frequently.
• Avoid relying solely on breakpoints to fix layout issues. Structure your HTML and CSS for flexibility.
• Use "em" or "rem" units instead of pixels for scalable and accessible design.

Final Thoughts: Media queries are essential for creating modern responsive designs. Practice by building layouts and testing across different screen sizes. The more you use them, the more intuitive they become.

About the Author: Zeeshan Ali is a passionate developer with expertise in frontend, backend, AI, and blockchain. Explore my open-source projects and tutorials on GitHub: Zeeshan Ali's GitHub Profile.