Question

How do you use media queries in CSS?

I'm learning about responsive design and want to understand how to use media queries in CSS. How do they work, and what’s the proper syntax for applying different styles based on screen size or device type? Any examples or best practices for implementing media queries effectively would be really helpful

Answer 1

In CSS, a media query is used to apply a set of styles based on the browser's characteristics including width, height, or screen resolution.

Basic syntax of a media query

Here is the basic syntax for a media query in CSS:

@media media-type (media-feature) {

/*Styles go here*/

}

And here is the example:

@media (min-width: 600px) and (max-width: 768px) {

  body {

    background-color: #de3163;

  }

}