Introduction to CSS3 Media Queries

What are media queries?

Media queries are a tool web designers can use to change the appearance of a web page based on the media used to view the website. The term “media” generally refers to the quality or property of the how we receive information. We refer to the “visual” media for television, or the “print” media for newspaper. The term “query” means to question. So a media query asks the web browser the question, “How is this page being viewed?”

You have already learned how to use CSS to change the appearance of a web page. You have used CSS to set the font size, the font style, and visual properties of elements on a web page. You can think of all the CSS rules you have created so far as the “default” or “global” CSS rules for your website.

Basic media queries were added in CSS2. Now, imagine you can create an entirely different set of CSS for a different kind of media. We have assumed that all our CSS rules will be used by people viewing your web page on some kind of a screen. But we could create a second set of media rules for print. For example, you could have you pages always print in black and white, rather than in color, to save on ink.

You can specify a h1 headling to print in red with this CSS rule:

h1 {color:#ff0000;} 

If we want this headline to print in black when using a printer, then we “wrap” the CSS rule in a media query:

@media print { 	
	h1 {color:#ff0000;} 

You can see that we are putting a “rule” inside of a “rule”. The inner rule sets the font color to #ff0000; or pure red. The outer rule, @media print, specifies that the rule takes effect only for print media. To set a rule specifically for the screen, you would use @media screen.

Recall that in the hexadecimal color format, there are three number pairs, red, green and blue. So our color is 100% red, 0% green, and 0% blue. This is as red as red gets!

CSS3 Enhanced Media Queries

When CSS3 was introduced, web developers gained one of the most powerful tools for responsive web design: media queries based on screen size! Not only could a developer create specific style rules for screen or print, but new rules could be created to specifically target content view on a mobile device, with a screen with of 781 pixels or smaller, or a tablet device with a screen size between 768 and 992 pixels, or on a desktop device with a minimum with of 1200 pixels.

This opened the door for what we now call Responsive Web design. You can create one website that changes its appearance based on the way the website is viewed. This is done by creating different media queries for different viewing sizes, each with their own style rules.

Because of the cascading quality of “cascading style sheets” the default or “global” style rules will remain in effect across different viewing widths until a specific media query breaks the cascade and new rules takes effect.

Here is another example, let us say you want a h1 heading to be 32pixels when viewed on a mobile device. This CSS rule would be written like this:

h1 { font-size:32px; }

Remember, we are doing “mobile first” responsive website design, so by default we start with the mobile appearance. If no other style rules are created, or specified, then the default rules are the same as the "mobile" rules. When we are selectng our media queries in Dreamweaver, we equate "global" with "mobile".

While that looks great on a small screen, we want something more dramatic on a tablet device, with a minimum screen size of 768 pixels. We want our font size to be 76 pixels instead. Here is how you write the media query that will only take effect when the browser has a minimum width of 768 pixels:

@media screen and (min-width:768px) { 
	h1 { font-size:76px;}

Media queries go far beyond just screen size, they also include factors such as whether the viewing device is in “landscape” or “portrait” mode, and logic operators can be used as well to combine different conditions.

Wayne Joness
West Los Angeles College, cs952