Media Queries

Responsive Design with Media Queries

Lesson Goals

Lesson

Goals

Video Lecture

Video

Lecture

Sample Code

Sample

Code

Lecture Slides

Lecture

Slides

Practice Problems

Practice

Problems

Files & Links

Files &

Links

What is a Media Query?

With the introduction of tablets and phones accessing the internet, there is a wide variety of screen sizes and resolutions to account for when developing a web site. For many years, organizations created multiple versions of their web sites (one for desktops and one for mobile). Unfortunately, this required that changes be made in two places, which is not the most efficient way to update a web page. More recently, the concept of responsive design has taken over and web developers can now query the media device to get information that will help them cater the styling/layout of a page or site to match the screen size of the device accessing it.

Step one in responsive design is to control the viewport and map the pixels of a site to the mobile device. This can be done in the following manner:

<meta name='viewport' content='width=device-width, initial-scale=1'>

In addition, sizing/placing elements relatively will avoid placements and widths that are too large for a smaller screen.

To control specific elements within a site or page, we can use media queries to control which styles are applied to an element. Media queries come in two flavors: Media Types and Media Features. There are four options for media types: all, print, screen, speech. Most pages are developed for screen and we must use the Features to customize the output for the screen size. There are many more options in terms of features including: width, resolution, orientation, and many others.

Media types are written simply as the word. In other words, if we wanted to specify a set of styles for print, we would use

media='print'

. In the case of setting styles for printing, typically the background is set to white, the foreground to black, and pictures are often hidden (display:none). This allows users to print the content of a web site without wasting all of their ink AND without the developer having to make a second version of the page with desired printing styles. The default media type is all and need not be written.

Media features are tests that check the device that the user is accessing the page from. A media feature is a name:value pair, similar to a style, that is tested against the viewing device and a value of true or false is returned. Media features are written inside of parenthesis. For example, to use a certain set of styles when the device screen is less than 480px, we would write

media='(max-width:480px)'

. Below is a list of common media features:

width - this checks the width of the display of a user device. By using min and max, width can be used to test/set minimum and maximum display values (min-width / max-width). The width of the actual device can also be tested using device-width.

height - checks the height of the display of a user device. Similar to width, min, max and device can all be used to get a clearer picture of the values in question.

orientation: landscape | portrait - this checks the orientation of a user device. This can sometimes be deceiving as the perceived orientation can change if something forces the width to be more than the height (e.g. a keyboard pops up in the screen).

aspect-ratio - this is the display ratio of the horizontal pixels over the vertical pixels of the viewable area. Can be used to test/set the min-aspect-ratio and the max-aspect-ratio. By adding the word device, it will consider the aspect ratio of the entire device, as opposed to the screen (device-aspect-ratio).

color - returns the bits used per color; 0 if there is no color. Can be used to test/set the min-color and max-color.

Compound Media Queries

Often, programmers want to set a series of restrictions on their media queries. For example, if we develop a stylesheet for tablets, we want to look at a range of widths from just bigger than a smartphone to just smaller than a laptop. Other times, we may want to have a set of styles that occur if one of several conditions are true. In these cases, we can use logical operators to build compound conditions.

AND - The conjunction operator for media queries is the word and (lowercase). For a compound query using an and to be true, both parts must be true. As stated in the text above, to make a style sheet apply to a tablet we may write:
```
media='(min-width:481) and (max-width:960)'
```
. Alternatively, we may choose a style based on the media type being print and a portrait orientation. That query would look like this:
```
media='print and (orientation:portrait)'
```
.

OR - The disjunction operator for media queries is a comma (,). Disjunctions are true when any part of them is true. So, to write a media query that checks if the display is in landscape or has a minimum width of 600px, we write:
```
media='(orientation:landscape),(min-width:600px)'
```
.

NOT - The negation operator for media queries is the word not (lowercase). Negations must utilize an explicit media type AND are applied to the whole list. In other words,
```
media='not print and (orientation:portrait)'
```
is seen by the computer as
```
media='not(print and (orientation:portrait)'
```
.

only - The only keyword is used to prevent older browsers that don't understand media queries from displaying the included styles. The only keyword applies to the entire query and needs an explicit media type. An example would be:
```
media='only screen and (min-width:480px)'
```
.

Applying Media Queries

Media queries can be applied to load an entire stylesheet

<link rel='stylesheet' media='print' href='stylesheet.css' />

or to control individual styles within a style sheet.

@media (min-width:480px) and (max-width: 620px){
	//css style pairs
}

A Discussion on Responsive Design

Developers want their site to look great everywhere - on phones, tablets, laptops and computers. However, since each device has unique measurements (even the iphone 4, 5 and 6 have different dimensions), this can become time consuming. Over time a list of 'generic' breakpoints have been created and can be seen below.

0-575px - portrait phones
576px - landscape phones
768px - tablets, small laptops
992px - large laptops, desktops
1200px - large desktops

Unfortunately, as technology progresses, these marks will have to change. As this type of development has progressed, the newer thinking is to build effectively by building up. In other words, start with the smallest version of the site - the mobile version. Instead of using pre-determined breakpoints, add break points where your site 'breaks'. This means that your design will look as you desire on any device as the layout will be forced to change whenever the layout starts to look bad.

A more recent movement is to work in relative sizes (em) instead of absolute sizes (px). This movement focuses on content as a change in em means a change in text size. This idea fixes the zooming issue. The standard view (1em) is typically 16px. But if a user zooms in, then 1em could be equal to 20px. By controlling the display text size based on relative sizes, we keep the focus on the content. To calculate, if your design 'breaks' at 400px, divide that value by 16 to get the corresponding em value (25 in this case) and set that as the max-width. In that style set, be sure to set an appropriate text size. As the breaks move up, continue to increase the text size appropriately.