The CSS3 standard introduced the media query method. We apply CSS styles based on a device's basic type, browser viewport width, or screen resolution. When a specific condition is met, a block of CSS attributes is included using the @media rule.

To apply distinct styles to various devices, media queries require the @media rule. Delivering a customized style sheet to mobile phones, tablets, laptops, and desktops is often done via media queries. Additionally, you may use media queries to declare that some styles are only appropriate for screen readers or printed documents.

Syntax:

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

and: A media feature is combined with another media feature or media type using the "and" keyword.

only: Modern browsers are unaffected by "only" keyword.

not: A media query's full meaning is reversed by the "not" keyword.

Media Types💻📱

The broad category of a device is described by its media types.

i. All: All devices are compatible.

ii. Print: Designed for print preview mode viewing of printed content and documents on a screen.

iii. Screen: Primarily focus on displays.

iv. Speech: When we want the content of our web pages to be translated into speech, we often use media speech.

Media Screen💻

Understanding the media screen is necessary for adding breakpoints to our screens, and doing so makes it simple to apply media queries to a variety of screens.

This is where media queries might be useful. To the design, we may add a breakpoint where specific elements will act differently.

Design always with 📱mobile first in mind🧠

Developing for mobile devices before designing for desktops or other devices is known as "mobile first". Instead of altering styles as the width decreases, we need to alter the design as the width increases.

Example:

/*-------------mobile phones screen --------- */
div {
  background-color: blue;
}

/*-------------- Tablet and higher screen---------------- */
@media only screen and (min-width: 768px) {
 div{
      background-color: red;
    }
}

In the above example, we chose blue for the mobile screen's background color, but when we checked it on devices with screens larger than 768 pixels, the color will changed to red. Focusing on mobile screens initially enables developers to create responsive websites with less effort.

Commonly used breakpoints🥓

It is challenging to establish a specific breakpoint for every device since there are so many devices and screen with varying widths and heights. You might focus on the following groups to keep things simple:

/*----- Extra small devices (phones, 600px and down) ----*/
@media only screen and (max-width: 640px) {...}

/*---- Small devices (portrait tablets and large phones, 600px and up) --*/
@media only screen and (min-width: 640px) {...}

/*--- Medium devices (landscape tablets, 768px and up) ------*/
@media only screen and (min-width: 768px) {...}

/*------ Large devices (laptops/desktops, 1024px and up) ------*/
@media only screen and (min-width: 1024px) {...}

/*--- Extra large devices (large laptops and desktops, 1280px and up) --*/
@media only screen and (min-width: 1280px) {...}

/*--- Extra large devices (large screen, 1536px and up) --*/
@media only screen and (min-width: 1536px) { ... }

Conclusion💭

Understanding media queries, their kinds, and syntax is important in order to construct responsive web pages. So, we went over everything you need to know before using media query, as well as how it works and why it's useful to be aware of screen breakpoints.

Happy learning😊