CSS Media Queries

Let me start with a quote:

Media queries are simple filters that can be applied to CSS styles. They make it easy to change styles based on the characteristics of the device rendering the content, including the display type, width, height, orientation and even resolution.

Yes, css media queries are a fundamental part of styling if you are after some responsive design. So, what is a media query? A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. In this post, I will briefly talk about css media queries and provide some simple examples.

You can use media queries in 2 ways. Let’s see some examples:

1-Refer to an external stylesheet for a css media query match

So when the requesting device has a screen width between 400px and 700px style.css sheet will be applied to your page being requested.

2-Use css media queries inside stylesheets

If you put this piece of css code in your stylesheet and if your page is requested with a device which has a screen width between 400px and 700px then the styling in “style to apply” section will be used for your page.

Of courseĀ “screen” is not the only media type. There are others like “print”. Min-width, max-width are called features, and they are not the only features neither.

If you want to learn more about css media queries, screen types, features etc. you can refer to w3.org.

Hope this helps.
Good Luck,


Leave a Reply

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