Understanding Media Queries.

Difficulty Rating :
Written byAires DaGraca

Media queries, a phrase that scares the hell out of some developers.

When in actuality there are pretty easy to understand. In my designs I tend to use at least 2 sets of media queries in every site I  design. The media queries job is to tell the browser what to do based on the screen size.

A media query consists of a media type and at least one expression that limits the style sheets’ scope by using media features, such as width, height, and color.  For example this media query tells the browser to make the h1 color red if the screen size is greater than 900px.

Media queries use 2 conditional statements to work their magic and they are min-width and max-width. With these two statements included in the media query make it is possible to have a totally different homepage based on the size of the device. So here is a brief explanation of what a media query is telling the browser.

Here’s what that actually means:

“If [device width] is greater than or equal to [specified #], then do {…}”

So if the actual “device width” is less than 768px  this condition will return false and all the styles you have under this media query will not display on screen smaller than 768px so in other words mobile devices.

“If [device width] is less than or equal to [specified #], then do {…}”

Under this media query is where I tweak the mobile experience. I check for padding issues, fonts that seem to big for mobile or anything else that looks like it doesn’t belong.

For those who want to get  a much deeper understanding of media queries hope over to Mozillas website

Was this article helpful?

Awesome, follow us on Twitter or Like us on Facebook

Disclosure: Some of the links above are affiliate links meaning at no additional cost to you, I will earn a commission if you click through and make a purchase.

Leave a Comment

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

By visiting iHeartElementor.com you accept our use of cookies and agree to our privacy policy.

Hello, would you like to take a survey before you leave.

Your answers will help us provide more and useful content.
Thank you for your time.