Media Queries in CSS. How do They Work?

The media queries are a special syntax for CSS that allows us to define some styles that will only be applied in the case that defined conditions are met. We can assimilate them to optional lines of code, which will only be displayed for some users or devices.

media-quey-css-use

Media Queries and responsive design: the revolution of mobile web design

At a time when mobile traffic is multiplying every year, static web sites designed to show up in a specific resolution are not useful anymore. (Do you remember websites designed to be displayed at 600px x 480px?) It was necessary to adapt the designs to specific dimensions so that the user would receive the web information in his device without having to zoom to read the texts.

At this point two ways of working emerged. The first had two versions of the same website, one for desktop and one for mobile. In most cases they were not connected to each other. This was expensive to maintain (two webs) and the content and design were not always the same.

The second way to work was to use the same design for both resolutions. A design that could be adapted to certain resolutions or be flexible in its entirety, regardless of the content and design they had. This new way of working was called responsive web design.

And as the design manager on a web is the CSS, there was a new element able to incorporate this flexibility into the style sheet: the media queries, which can cover portions of code that will only be applied according to some conditions: if the resolution of the screen is small, if it is very large, if the device is in horizontal position …

Syntax of a media query. How does it work?

Syntax-media-query

The media queries acts as a container for the rules and selectors to be applied, therefore, everything that begins with the opening of a key and ends with the closing of it. As for the syntax, a media query always starts with the @media flag, followed by a mediatype.

@media not|only mediatype and|not|only (media feature) {
  .my-code { … }
}

This mediatype is in charge of selecting which type of format will be subject to these rules. Here we can decide between all, printed, screen or speech, useful for adapted and accessible equipment.

With the “not” and “only” operators we can play to group or exclude a particular type of mediatype.

metia-type-css

The second parameter of a CSS media query is the media feature, where we tell the browser which condition must meet the output device specified above for the condition to be true and apply this code contained in our media query.

The most common media features are those referring to the screen dimensions of the device, being able to set the height and width in which they will be applied, (with height and width) or what is more interesting, from which width or height will be applied (With min/max-width and min/max-height.)

media-feature-responsive

Although there are also more complex ones, such as those combined with the orientation of the device (landscape or portrait) or even those that define the pixel ratio of the screen, such as device-pixel-ratio, very useful for defining styles and CSS for the retinas screens, for example some iPads or iPhones. Here you have more information about the specifications.

media-feature-css

How a media query works? Some examples

Operating in the browseris very simple. It will simply apply the code that is included in a media query overwriting the inherited one. With this it is as if we establish one layer on another, with a certain transparency, since we do not eliminate completely the general code of the CSS style sheet.

For example, we want to show a specific code only on screens and with a resolution less than 400px. The resulting code would be:

@media screen and (max-width: 400px) { … }

media-queries

Mobile first: how to use the media queries correctly?

One of the main doubts that arise when using the media queries is if we define the general style of the CSS for desktop and reserve the conditionals for the mobile or we do it in reverse. We are talking about the trends Desktop First and Mobile First.

mobile-first-media-query

It has been discussed long and wide about this, and few people doubt since the most interesting thing is to work with mobile first, that is, to have some styles for mobile as base (small resolutions) and to grow little by little adding media queries for larger devices thanks to the mediatype min-width.

With this we create a very light version for the mobile users (where the browser only has to apply the first lines of CSS) while the load of reading the whole set overwriting the lines marked in the media queries is taken by devices of greater resolution, which it is mean, they will have a faster internet connection and higher processing speed of such conditionals.

In short, it is a very useful tool that we can use in our CSS stylesheets to adapt to any device and resolution. Think of your web as if it were water and has to be flexible to fit into a glass, a bottle or a pool. Be water my friend!

Comments (3)

  1. I know it’s a little bit to late, but I would like to say thank you, for sharing this wonderful article. Helpful for newbies like me.
    #CSS #WeMakeWebsite

Leave a Reply

Your email address will not be published. Required fields are marked *