Media Queries

Media Queries are CSS (Cascading Style Sheet) rules which act as logical IF statements to, among other things, target the display resolution of the device or browser used to view a web page. Given a specific set of logic, the rules apply in some situations and not in others. Through the use of Media Queries website designers are able to customize the design and display of a website when it is viewed on different devices. This is known as mobile responsiveness and can be used to make a mobile friendly website.

Example Media Query:

@media screen and (max-width: 768px) {
    .media-highlight {
        background-color: green;
        color: white;
    }
}

@media screen and (min-width: 769px) {
    .media-highlight {
	background-color: yellow;
	color: black;
    }
}

Example Output:

This is a div container with the above media queries applied via a class. If you are viewing this page on a device, then it is using a SCREEN which the rule applies to. If the display width of your device is below 768px wide, then the first set of rules applies and you will see this text on a green background with white lettering. If the display width of your devices is over 769px wide this text will be black on top of a red background.


Testing Media Queries: The media queries and the example output above can be tested with relative ease using a desktop monitor with a display resolution capable of greater than 768px in width (most current computer and laptop monitors / screens).

  1. Reduce the size of your browser window so that it is not displaying full-screen
  2. Click on the outer boundary border and drag to resize the width of the browser window
  3. As you drag the browser window smaller, keep an eye on the yellow div container above
  4. Your testing will be confirmed when your browser window is reduced below 768px in width and the background / text color of the div above changes to green / white

That is a media query at work.

Media queries allow for changing styles and rules set by CSS such as: margins, padding, widths, heights, floats, colors, backgrounds, CSS defined images, CSS defined content, and much, much more.

In addition to the simple media queries exemplified above, significantly more complex media queries can be written to apply to a much wider range of scenarios.

Media Query Logic Operators

 And 

The logical AND operator is defined by the word “and” in between two or more rules. The rules defined are triggered when both of the indicated conditions evaluate to true. In the example below, the rule will be applied if the device width is above 400px AND the device height is below 600px.

@media (min-width: 400px) and (max-height: 600px) {
  .target-div-class { float: right; }
}

 Or 

The logical OR operator is defined by comma(s) separating two or more rules. The rules evaluate to true if one of the conditions is met. The rule below will be applied if the device width is below 600px OR if the device height is above 800px.

@media (max-width: 600px), (min-height: 800px) {
  .target-div-class { float: right; }
}

 Not 

The Not operator reverses the logic of a media query effectively reversing its otherwise intended application. In the media query below, the rule would be applied if the device width was above 600px.

@media not all and (max-width: 600px) {
  .target-div-class { float: right; }
}

Media Query Notes and Tips:

 Writing Clean CSS Media Queries 

Media queries can overlap and conflict if not managed properly. While this might be the intention at times, by keeping the media queries unique to specific situations (as in the example code below) a designer can improve CSS readability, evaluation, and customization.

Each of the rules below apply to one specific display width. As the width increases different rules take precedent and come into play.

@media (max-width: 200px) {
  .target-div-class { float: right; }
}
@media (min-width: 201px) and (max-width: 600px) {
  .target-div-class { float: left; }
}
@media (min-width: 601px) {
  .target-div-class { float: unset; }
}

 Combining standard CSS with Media Queries 

Standard CSS rules apply to the indicated ID, class, or element they are assigned to. This means that a standard CSS rule written to apply to all ul li elements will, in fact, apply to all ul li elements.

Media Query CSS rules allow for targeting of specific conditions in order for those rules to apply.

Considering the following example:

@media (max-width: 200px) {
  .target-div-class { float: left; }
}

.target-div-class { float: right; }

The above rules contain a standard CSS rule which floats the element the ‘target-div-class’ class is applied to either to the right or to the left. The Media Query targets that element with a different rule when the display resolution is below 200px only. The thing to note in this instances is that CSS follows a last rule first ordering of priority. Other factors can change this, such as the ‘!important’ call.

Given the rules above, the last rule is the standard rule to float the element to the right. This will override the media query even if the device width is below 200px. To remedy this, either the ‘!important’ call can be used, or the order of the rules can be reversed.

.target-div-class { float: right; }

@media (max-width: 200px) {
  .target-div-class { float: left; }
}

The above example will, following the last-rule-first method, apply the left float to the element if the device width is below 200px properly.

 Using !important 

Using the ‘!important’ call overrides the last-rule-first standard and gives the rule to which it is applied priority.

@media (max-width: 200px) {
  .target-div-class { float: left !important; }
}

.target-div-class { float: right; }

Unlike the first example in this set, this example will apply the left float properly, regardless of the order of the rules.

This entry belongs to the following Glossary Lists:
Cascading Style Sheets (CSS), Coding, Content Creation, Mobile Friendly, Responsive, and Website Design.

Return to the Glossary Index

About Rick D'Haene

Rick D'Haene is a web developer, specializing in WordPress, with a degree in graphic and website design. Rick has extensive knowledge of internet marketing and organic search engine optimization (SEO). He and his lovely wife Melissa reside in Bellingham, Washington, and have a few fun pets to keep them company.

Find me here: Twitter /Facebook /Google+ /

Leave a comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.