Mobile First Responsive Design with Media Queries Using The CSS @media Selector


Previous | Part 3 of 5 | Next

By Lon Hosford
Media queries have a somewhat confusing syntax. This is typical as web page technologies evolve. Often there is a lot of forward thinking and features are added that may never become mainstream. So we need to sort out the parts of the syntax that are important to mobile first responsive design.

Blog image for CSS Media Query 101 Mobile First Tutorial Applying @media CSS Selector

Media queries can be added and using the CSS @media selector. The @media selector’s basic job is to create a test inside the CSS code. One of the tests is for the type of media.

Media Types

There is a keyword list for the media types web browsers may detect using media queries. The list includes all, aural, braille, embossed, handheld, print, projection, screen, speech, tty, andtv. Descriptions of these appear at the end of this article. We will use the screen type for mobile detection.

Media Type Properties (Features)

Then each media type has a potential of feature properties. We are not going to explore all of them other to mention the list which is color, color-index, aspect-ratio, device-aspect-ratio, device-height, device-width, grid, height, monochrome, orientation, resolution, scan, and width. Descriptions of each appear at the end of this article. Keep in mind they do not all apply to every media type and may apply to more than one media type. Also the feature properties may allow a min- or max- prefix. For example min-device-width or max-height.

For our purposes we are only interested in the width property. For our mobile first approach we will prefix as min-width.

Mobile First Responsive Design Step By Step

This video covers the media type and properties and applies them to the practice file.


Source Files for the video series: Download

Complete Starting Practice File






CSS Mobile Media Queries 101 | Lon Hosford



	

Scriptum Titulus

Pagina Titulus

Sed consequat feugiat dictum. Aliquam fermentum sodales lectus in aliquam. Duis venenatis augue quis eros egestas fringilla. In consectetur eleifend hendrerit. Praesent quis interdum ligula. Nulla et aliquam lorem, ut ultricies elit. Nulla blandit nunc orci, ac ultricies nisi ultricies sit amet. Suspendisse nec metus est. Donec sem diam, cursus nec enim et, interdum tristique quam. Aliquam et dolor arcu.

Donec vel libero enim. In porta at mauris a mattis. Sed rhoncus dolor ut purus feugiat lobortis. Proin vel tellus consequat, mattis diam eu, egestas lacus. Morbi dictum justo ac erat condimentum venenatis. Nunc augue dolor, aliquet id ligula in, rhoncus sollicitudin elit. Phasellus rhoncus laoreet elit, ac aliquet risus tincidunt eu. Suspendisse vitae ligula commodo, tristique justo consectetur, congue justo. In semper sed quam eget rutrum.

You see we already have the meta tag on line 5 that directs mobile web browsers to not resize the web page and fit it all within the device width.

 

Then we have a base set of styles and selectors. These are minimal and you can expand on them for your own work. These styles appear as the default for all device widths. Also we want to design a single column view for the base. Fortunately that is the default for web browsers.

 

The first query is for a 320 pixel width. As the comments show, this is the first width for devices like an iPhone. At this point it also will represent all widths over 320 pixels. Also we can refer to this as a break point.

We just are changing the background color for the body selector. Something simple like the body background color is a quick way to verify your media queries are working.

	/* Smallest Screen Size Design Target */
	/* Example: iPhone portrait */
	/* True if width greater than or equal to 320px */
	@media only screen and (min-width: 320px) {
		body {background:#B26BB2;}
	}

Next we add two more break points for 768 and 1024 pixels. In those we override the body selector background-color property.

	/* Example: iPad portrait */
	/* True if width greater than or equal to 768px */
	@media only screen and (min-width: 768px) {
		body {background:#33CCCC;}
	}
	/* Examples: iPad landscape, Laptops and Desktops */
	/* True if width greater than or equal to 1024px */
	@media only screen and (min-width: 1024px) {
		body {background:#FF0066;}
	}

This is the practice.html file completed to this point. You can open in your favorite browser.






CSS Mobile Media Queries 101 | Lon Hosford



	

Scriptum Titulus

Pagina Titulus

Sed consequat feugiat dictum. Aliquam fermentum sodales lectus in aliquam. Duis venenatis augue quis eros egestas fringilla. In consectetur eleifend hendrerit. Praesent quis interdum ligula. Nulla et aliquam lorem, ut ultricies elit. Nulla blandit nunc orci, ac ultricies nisi ultricies sit amet. Suspendisse nec metus est. Donec sem diam, cursus nec enim et, interdum tristique quam. Aliquam et dolor arcu.

Donec vel libero enim. In porta at mauris a mattis. Sed rhoncus dolor ut purus feugiat lobortis. Proin vel tellus consequat, mattis diam eu, egestas lacus. Morbi dictum justo ac erat condimentum venenatis. Nunc augue dolor, aliquet id ligula in, rhoncus sollicitudin elit. Phasellus rhoncus laoreet elit, ac aliquet risus tincidunt eu. Suspendisse vitae ligula commodo, tristique justo consectetur, congue justo. In semper sed quam eget rutrum.

If that browser has a responsive design viewer like Firefox, then try the different breakpoints. Otherwise you can resize the width of the web browser for an approximation.

As you do, try widths between the breakpoints and you can see the web browser default flexible rendering of block tags has the text wrap and unwrap as you adjust sizes. Notice that the background color remains the same within the breakpoints.

Understanding Responsive Design Changes

Changing the background color at breakpoints is interesting but is not the most probably design change you want to achieve for various breakpoints. You will want to change styling such as sizes of fonts , margins, padding and line-heights for example. Smaller fonts for narrow widths and larger fonts for wider widths. Less padding and margins for smaller widths and take advantage of the screen real estate of larger widths with more padding and margins.

You also may want different layouts. Narrow widths are likely to render a better experience for users if you design a single column layout. Then for the wider widths, you can introduce multiple column layouts.

For this article are just going to demonstrate some basic style changes to font sizes, font-color, padding and line-heights. In a future article we will experiment with a basic layout change.

Here are the changes:

	/* Smallest Screen Size Design Target */
	/* Example: iPhone portrait */
	/* True if width greater than or equal to 320px */
	@media only screen and (min-width: 320px) {
		body {background:#B26BB2;}
		header h1 {
			font-size:1.6em;	
			height:2.8em;
			line-height:2.8em;	
		}
		section {
			padding:.9em;
		}
		section h2{
			color:#000;
			font-size:1em;
		}
		section p{
			color:#000;
			font-size:.9em;
		}
	}
	/* Example: iPad portrait */
	/* True if width greater than or equal to 768px */
	@media only screen and (min-width: 768px) {
		body {background:#33CCCC;}
		header h1 {
			font-size:1.8em;	
			height:3em;
			line-height:3em;	
		}
		section h2{
			font-size:1.5em;
		}
		section p{
			font-size:1.3em;
		}
	}
	/* Examples: iPad landscape, Laptops and Desktops */
	/* True if width greater than or equal to 1024px */
	@media only screen and (min-width: 1024px) {
		body {background:#FF0066;}
		header h1 {
			font-size:2em;	
			height:3.2em;
			line-height:3.2em;	
		}
		section {
			max-width:1200px;
			padding:.9em;
		}
	}	

You might want to turn your attention to the 1024 pixel breakpoint. There we are capping the width of the section selector. The idea is to keep the text from unwrapping for very large monitors. Some assumptions about content are going to go into such a choice. In our case it is arbitrary for demonstration.

But you will need to think about the base view and the largest break point extremes. The base view is for devices you have not considered below the first breakpoint. The design can be what every you want to put time and energy into creating or you may just want a near print ready styling. The widest breakpoint needs to handle the extreme widths.

Here is the completed practice file.






CSS Mobile Media Queries 101 | Lon Hosford



	

Scriptum Titulus

Pagina Titulus

Sed consequat feugiat dictum. Aliquam fermentum sodales lectus in aliquam. Duis venenatis augue quis eros egestas fringilla. In consectetur eleifend hendrerit. Praesent quis interdum ligula. Nulla et aliquam lorem, ut ultricies elit. Nulla blandit nunc orci, ac ultricies nisi ultricies sit amet. Suspendisse nec metus est. Donec sem diam, cursus nec enim et, interdum tristique quam. Aliquam et dolor arcu.

Donec vel libero enim. In porta at mauris a mattis. Sed rhoncus dolor ut purus feugiat lobortis. Proin vel tellus consequat, mattis diam eu, egestas lacus. Morbi dictum justo ac erat condimentum venenatis. Nunc augue dolor, aliquet id ligula in, rhoncus sollicitudin elit. Phasellus rhoncus laoreet elit, ac aliquet risus tincidunt eu. Suspendisse vitae ligula commodo, tristique justo consectetur, congue justo. In semper sed quam eget rutrum.

Media Types Reference

all
Simple for all devices.
aural
CSS2 version of speech
braille
Tactile braille devices.
embossed
Intended for paged braille printers.
handheld
Early choice for detecting small screen devices with low bandwidth capability.
print
For printing.
projection
Devices that facilitate projection of presentation. The typical projector is and example.
screen
Color computer screens.
speech
Devices that can synthesize speech. Compare to aural in CSS2.
tty
Fixed character width grid devices like teletypes and terminals. Devices usually have limited display features.
tv
Television like devices.

Media Types Features Reference

color1
Number of bits per color.
color-index1
Number of entries in the color look-up table.
aspect-ratio1
The display area ratio of the horizontal pixels to vertical pixels. Expressed as two unsigned integers separated by a slash.
device-aspect-ratio1
The output device area ratio of the horizontal pixels to vertical pixels. Expressed as two unsigned integers separated by a slash
device-height1
The output device height.
device-width1
The output device width.
grid
True if a grid device or a bitmap device is detected. For example a phone or teletype.
monochrome1
Detects the number of bits per pixel on a monochrome device.
height1
The rendering area height.
orientation
Tests for the values landscape or portrait.
resolution1
Pixel density of the device expressed as dots per inch (dpi) or dots per centimeter (dpcm).
scan
Tests for the values progressive or interlaced.
width1
The rendering area width.

1 Supports min- and max- prefix.