Using Media Queries in CSS

media queries are CSS techniques that allow you to apply different styles depending on the device's screen size.

Syntax

The basic syntax of a media query is as follows:

@media (max-width: 600px) { ... }

Purpose

media queries allow you to:

Adapt the design to different screen sizes.
Improve the user experience on mobile and desktop devices.

Exercises

Interactive Quiz 1: Drag and Drop.

Arrastra en el orden correspondiente.

Arrastra las opciones:

@media (max-width: 600px)

@media (min-width: 601px)

@media (max-width: 1024px)

Completa el código:

Applies styles for screens with a maximum width of 600px. ______ { font-size: 14px; }

Applies styles for screens with a minimum width of 601px. ______ { font-size: 16px; }

Applies styles for screens with a maximum width of 1024px. ______ { font-size: 18px; }

Interactive Quiz 2: Fill in the Blanks

Rellena los huecos en cada casilla.


 {
  body {
    font-size: 14px;
  }
}

 {
  body {
    font-size: 16px;
  }
}

 {
  body {
    font-size: 18px;
  }
}

Practical Exercise:

Instructions:

Write a CSS style using media queries to change the font size according to the screen width.
Click on "Show Solution" and "Apply CSS" to see the result.

Using Media Queries in CSS

Property	Description
@media (max-width: 600px)	Applies styles for small screens.
@media (min-width: 601px) and (max-width: 1200px)	Applies styles for medium screens.
@media (min-width: 1201px)	Applies styles for large screens.

* Write your CSS code and apply it to see the results.

Results:

Responsive design example

What do media queries allow you to do in CSS?