As promised in this post I will be looking into how to make your media queries a little bit (or a lot more) specific based on your requirements.
Before moving to the interesting parts of this blog post I would like to recap the following major points which were covered in the previous post.
min-width basically stands for “applicable of the device width is greater than or equal to” which means that the CSS code is applicable only on a media type (e.g. a screen) with width greater than or equal to the specified width.
max-width basically stands for “applicable if the device width is less than or equal to” which means that the CSS code is applicable only on media type (e.g. a screen) with width less than or equal to the specified width.
With this knowledge we can identify the following keywords in media queries that would enable you to apply different CSS code to more restricted and specific media types.
Assume a scenario where you only want a particular piece of code to be applied to screens with a width in between 768px and 992px (i.e. tablets). With the basic knowledge on media queries you can achieve this output by writing the following queries, which seems like too much work to me.
As you can see, the first media query applies black as the background color of any screen width a width greater than or equal to 768px which includes tablets, desktops and wide screens. However since we want the background color to be black only in the case of tablet screens, the second media query overrides the CSS property for all screens with a width greater than 992px (desktops and wide screens).
With the AND key word this additional effort is not required. Assuming the same scenario, where you want to change the background color only in the case of the tablet screens (in the range 768px to 992px), the following code requires less effort and time.
You can see that using AND is very much similar to setting a boundary.
The OR keyword can be used in instances where you would otherwise have to write two separate media queries.
For an instance, assume you want to change the background color for screens which are less than 768px in width (like mobile phones) or greater than 1200px in width (wide screens). Even when there will be no overriding in media queries, you will still have to write the same code twice if you use the basic query structure.
However using OR halves your effort!
It was mentioned in the earlier that media queries are like if statements and would apply the specified CSS code of the condition specified is true. The NOT keyword however, does the exact opposite. It simply applies the specified CSS code if the entire condition specified returns false.
The important thing to be understood when using NOT is the correct syntax of writing the media query. When using NOT, the keyword is applied to the entire expression till the end or until it reaches a comma. Which means that:
Also, where there is a list of expressions, the scope of the NOT keyword ends when it meets the comma separator.
Alryt! In this blog post I have summarized what we gathered from the previous post and covered how to write more complex media queries to suit your requirements. We saw how the basic keywords AND, OR and NOT helps you to make your queries more specific and reduces your coding time and effort in a significant manner. And this marks the end of my journey into media queries, for now.
Till the next time 🙂