CSS tutorial series: CSS media queries

Media queries are used by web designers and developers to apply CSS styles depending on the types of devices or screen that is showing a webpage. This makes it possible to create responsive designs that change to cater the user's device's specifications, such as altering the layout or hiding specific components on different screen sizes.

Structure of a Media Query

Let's dissect it.

• The @media rule is the first component of a media query. This keyword informs the browser that the ensuing rule is a media query and need to be like so.
• The media type (screen), such as screen, print, or speech, is specified using the media type attribute. The most popular media type is "screen," which includes computer screens, mobile devices, and tablet displays.
• The Media feature (max-width) is used to target a specific device or screen and to specify details like the device's pixel ratio, screen width, and screen resolution. To create more precise queries, media features are combined with the media type. For instance, you can target devices with screens wider than a specific amount using the media feature "min-width".
• The logical operators AND, OR, and NOT not are used to link together several conditions to build more complex queries.
• Value is the value set.

In other words, media queries are used to add a breakpoint at certain media features like in the example provided above the breakpoint was at 600px.

The best approach to responsiveness is the mobile-first approach, that means designing for mobile then other devices.

The most common media queries breaking points are :

• Extra Small: less than 576px
• Small: between 576px and 768px
• Medium: between 768px and 992px
• Large: between 992px and 1200px
• Extra Large: 1200px and above

@media (max-width: 575px) {}

@media (min-width: 576px) and (max-width: 767px) {}

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

@media (min-width: 992px) and (max-width: 1199px) {}

@media (min-width: 1200px) {}

Try increasing and decreasing the size of the page

The next post will be a simple and easy challenge where we will apply everything we've learned so far.