CSS Media Queries

Media Queries are one of the main new features of CSS3. These CSS language constructs allow you to define conditional styles, applicable only in certain situations. Learn all the details of CSS mediaqueries.

In a quick translation, CSS Media Queries (or CSS mediaqueries) are queries about the characteristics of the medium where a website is being viewed. They help us to define conditional styles, which will only be applied if that query in the middle is satisfactory.

They are one of the fundamental tools to implement “Responsive Web Design” and have come hand in hand with the , becoming a fundamental ally of any web designer.

In most cases Media Queries are used to define different styles for different screen sizes. They are simple to understand and apply, although in truth the standard is quite sophisticated. They offer us many possibilities when it comes to applying conditional styles, with multiple use cases, some of which are not so common in today’s design world, but which may have a leading role at some point.

Note: Just out of curiosity, since it’s not really used much in current design, media queries can tell us if the device has a 4:3 or 16:9 screen ratio, or a given color depth, for example. In this article we will take care of knowing the most common use cases and later we will delve into these other additional features.

Mediaqueries: a step forward in CSS

Media Queries represent an important evolution of CSS, since they represent the first conditional structure in the language. We know that CSS is not a programming language, nor does it have any reason to look like one, but there are many things that are implemented in programming languages ​​that would be useful when developing with CSS, such as conditionals.

“If this happens, then do such a thing”

A conditional construct like this is so useful and basic that even though CSS isn’t a programming language, it needed to incorporate them. Examples of cases in which we could use a conditional:

– If the user’s screen has these characteristics, then apply these styles

– If the document is printed on the printer, apply these styles.

– If the screen of the device has these dimensions and is also located in a horizontal position (landscape), then apply this CSS.

Situations like these are basic and designers can solve them using MediaQueries. They are a step forward in terms of the separation between the content and its representation, since they make it easier for the content of a page to be able to adapt to the medium where it is being reproduced, only through the definition of styles, without having to touch the HTML for nothing.

Alternatives to Implement Media Queries

Although the utility is new, the syntax is similar to what we already know from CSS, so it will be very simple for us.

To produce Media Queries we must always keep in mind the conditional expression, the one that must be met for certain styles to be applied. In addition, the conditional expression can even have several conditions, using logical operators such as “and” to combine them. So that the circumstances that must be met to apply CSS rules are highly varied.

Alternative 1: Application of mediaqueries by the LINK tag

The first alternative to MediaQueries is through the media attribute of the LINK tag. As we know, this tag is the one used to link a style sheet with an HTML document. In that binding we can specify conditionals that must be true for the bound styles to be applied. For example, that a document is being printed or that the screen has a certain minimum width.

Remember, the LINK tag has this form:

Well, now we can simply add the “media” attribute indicating the condition that must be met for these styles to be applied:

This media=”print” attribute means that the styles should be applied only when the page is being displayed for printing.

This use will surely be more novel for you. This means that these styles should be applied only when the user’s screen (the pixel width of a mobile screen or, in the case of desktop computers, the width of the browser window) has a minimum width of 1200 pixels.

The problem with writing your Media Queries like this is that you have separate CSS files. That is, those styles for printing or for 1200px screens are in separate files, which is easy for us to manage, but a bad practice in terms of web optimization, since several different server requests have to be made to fetch the CSS. In practice it slows down the page load relative to making a single request for a CSS file containing all the style code.

Alternative 2: Application of mediaqueries through @media

This method that we are going to see now is more interesting and is the one that is commonly used at a professional level. It consists of incorporating the styles in a @media construction, where all the styles we want for a given media query are applied between braces.

@media (min-width: 500px) { h1{ margin: 1%; } .responsivestyle{ float: right; padding-left: 15px; } }

As you can see, we have the @media statement in which we can indicate in parentheses the conditions that must be met for this mediaquery to be applied. In this case it will be for screens that have a minimum width of 500 pixels.

Then, between braces we put all the CSS style rules and attributes that we need to apply in this situation. The style rules are the same as you would put outside the conditional structure. When the statement in parentheses evaluates to true, all of them will be applied.

Logical Operators for Media Queries

To combine various conditions we can use logical operators, in a similar way to how they are used in programming languages. The ones we have available are:

• operator and:

both conditions must be true for it to evaluate to true.


• not operator:

it is a negation of a condition. When this condition is not met, media queries will be applied.


• operator only:

The rules are applied only in the case that a certain circumstance is met.


• Or operator:

It doesn’t exist as such, but you can put several conditions separated by commas and when any of them are met, the styles of the media queries will be applied.

@media (max-width: 600px) and (orientation: landscape) { h1{ color: red; } }

This rule would apply for screens with a maximum width of 600 pixels and when the orientation is landscape.

Note: Keep in mind that most smartphones simulate larger screen sizes, making a kind of virtual dimensions that make it easier to read websites that are not designed for Responsive Web Design. Therefore, you will most likely have to set the “viewport” in the HTML document to something like: Without that viewport Your mobile would simulate that it has dimensions of about 980 pixels, when perhaps the screen only has a real width of 320 or 500 pixels. This issue has already been explained in detail in the .

To see the orientation part (landscape or portrait) in operation, you have to use a mobile or tablet and change the position of the screen, so that it is horizontal or vertical.

Note that if you are viewing the page in a desktop browser, it will most likely not recognize the orientation change. In that case the position will always be considered to be landscape.

This rule would apply to television-type devices whose minimum width resolution is 1200 pixels.

The following example illustrates a use of the OR operator of mediaqueries, which does not really exist, instead the comma is used, to separate the different situations in which the style should be applied.

This mediaquery will be used for screens with a minimum size of 600 pixels and also for all those handheld devices that are in a vertical position.

Note on Handheld: Handheld is an English term used to specify those devices that are handheld. Small computers that are carried in the hand, such as palms or electronic agendas that appeared before smartphones or tablets became popular. From my handheld tests it does not apply to mobile phones or tablets.

Media Queries have many more possibilities that we don’t cover in this article. We will see them later, but without a doubt with what you now know you will be able to solve 98% of the needs that you can find in the world of web design.