Introduction

In this tutorial, we will delve into the world of Media Queries, an essential tool in responsive web design. The goal is to help you understand how to use media queries to style your web pages differently depending on the characteristics of the device viewing them, such as screen resolution, orientation, and type.

By the end of this guide, you will:
- Understand what media queries are
- Know how to write basic media queries
- Be able to apply different styles for different devices

Prerequisites

You should have basic knowledge of HTML and CSS. Knowledge of basic responsive design principles will be beneficial but not mandatory.

Step-by-Step Guide

What are Media Queries?

Media queries are a feature of CSS3. They allow you to apply different styles to different devices based on characteristics like their screen size, device type, and orientation.

How to Write a Media Query

A media query is composed of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color.

A basic media query syntax looks like this:

@media screen and (max-width: 600px) {
  /* CSS styles here */
}

In the example above, the styles within the brackets will be applied to screens smaller than or equal to 600px wide.

Best Practices

• Try to design your site mobile-first. That means you first style for small screens, then use media queries to add styles for larger screens.
• Test your media queries on actual devices when possible. Simulators and emulators can help, but they may not always be 100% accurate.

Code Examples

Example 1: Changing font size based on screen width

p {
  font-size: 18px;
}

@media screen and (max-width: 600px) {
  p {
    font-size: 16px;
  }
}

In the above example, the font size of the paragraph tag is set to 18px by default. However, if the screen size is 600px or less, the font size will be 16px.

Example 2: Changing layout for smaller screens

.container {
  display: flex;
}

@media screen and (max-width: 600px) {
  .container {
    display: block;
  }
}

Here, we have a container that uses flex display. However, for screens that are 600px wide or less, we change the display to block.

Summary

In this tutorial, we have covered:
- The concept of media queries
- How to write a basic media query
- How to apply different styles for different devices

To continue learning, you might want to explore different media features and how to use them in media queries. You can find a comprehensive list of media features on the Mozilla Developer Network site.

Practice Exercises

Exercise 1: Write a media query that changes the background color of the body to blue when the screen width is less than or equal to 500px.

Solution:

@media screen and (max-width: 500px) {
  body {
    background-color: blue;
  }
}

In this exercise, we use a media query to change the background color of the body when the screen width is 500px or less.

Exercise 2: Write a media query to change the layout of a div with a class .main from grid to flex when the screen orientation is landscape.

Solution:

@media screen and (orientation: landscape) {
  .main {
    display: flex;
  }
}

In this exercise, we use a media query that checks the orientation of the screen. If the orientation is landscape, it changes the display of the .main div to flex.

Remember, practice is the key to mastering media queries, so try to use them in your own projects and see the results.