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.

[css]
/*desktop styles here*/
@media (min-width: 900px) {
  h1 {
    color:red;
  }
}
[/css]

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.

[css]@media (min-width: 768px)  {...}[/css]

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.

[css]@media (max-width: 767px)  {...}[/css]

“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.