CSS Media Queries Best Practices

1. Introduction

In this tutorial, we aim to introduce you to the best practices when using CSS media queries. You'll learn how to effectively use media queries to create adaptable, responsive designs that look great on different devices.

You will learn:

• What CSS media queries are.
• When and how to use CSS media queries.
• Best practices and tips for using media queries effectively.

Prerequisites:

Basic knowledge of HTML and CSS is required to follow along with this tutorial.

2. Step-by-Step Guide

CSS media queries are a feature of CSS3 that allows content to adapt to different conditions such as screen resolution (for instance, a smartphone screen vs. a computer screen).

The Syntax

A CSS media query includes a media type and can contain one or more expressions that check for certain conditions. The general syntax is:

@media not|only mediatype and (expressions) {
  CSS-Code;
}

The media type can be all, print, screen, speech, etc. The expressions can check for many things, such as width, height, and color.

Best Practices

• Mobile First Approach: This is a design strategy that says we should design for mobile first, then add media queries to adjust the design for larger devices. This is done using min-width in your media query.

• Avoid Overlapping: To avoid overlapping of media queries, you should use exclusive ranges for each device.

• Use Standard Device Sizes: Generally, it is best to stick to the common device widths (320, 480, 768, 1024, 1200px).

Here's an example of a media query:

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

3. Code Examples

Example 1: Mobile First Approach

/* Base CSS for mobile */
body {
  background-color: lightgreen;
}

/* CSS for devices larger than 480px */
@media screen and (min-width: 480px) {
  body {
    background-color: lightblue;
  }
}

In the above example, the body background color is lightgreen for mobile devices. However, for any device larger than 480px, the background color changes to lightblue.

Example 2: Avoid Overlapping

/* Base CSS for mobile */
body {
  background-color: lightgreen;
}

/* CSS for devices larger than 480px but smaller than 768px */
@media screen and (min-width: 480px) and (max-width: 767px) {
  body {
    background-color: lightblue;
  }
}

/* CSS for devices larger than or equal to 768px */
@media screen and (min-width: 768px) {
  body {
    background-color: lightyellow;
  }
}

Here we've added a max-width to the first media query to avoid overlap. The body color will be lightblue for screens larger than 480px but smaller than 768px. For screens 768px or larger, the color will be lightyellow.

4. Summary

In this tutorial, we have covered:

• What CSS media queries are.
• How to use them effectively.
• Best practices such as the mobile-first approach, avoiding overlapping, and using standard device sizes.

The next step is to practice these concepts with different CSS properties and on different HTML elements. You can also study more about the different media types and features you can query.

5. Practice Exercises

1. Write a media query that changes the color of all headers (h1-h6) to red on screens smaller than 600px.

2. Write a media query that changes the font size of a paragraph to 18px on screen sizes between 768px and 1024px.

3. Write two media queries that change the background color of the body to yellow on screens larger than 1200px and to green on print.

Solutions

1.

@media screen and (max-width: 600px) {
  h1, h2, h3, h4, h5, h6 {
    color: red;
  }
}

2.

@media screen and (min-width: 768px) and (max-width: 1024px) {
  p {
    font-size: 18px;
  }
}

3.

@media screen and (min-width: 1200px) {
  body {
    background-color: yellow;
  }
}

@media print {
  body {
    background-color: green;
  }
}

Keep practicing to get more comfortable with media queries! They are a powerful tool for creating responsive designs.