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.
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.
[ad name=”Google Adsense”]
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.
[iframe https://www.youtube.com/embed/Yhtyp20CBlg 640 360]
Source Files for the video series: Download
Complete Starting Practice File
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Mobile Media Queries 101 | Lon Hosford</title>
<style type="text/css">
header, section{ display: block; }
/* All elements */
* {
color:#FFF;
margin:0;
padding:0;
}
body {
background:#575757;
font-family:Helvetica, Arial, sans-serif;
}
header h1 {
background:rgba(0,0,0,.7);
font-size:.8em;
height: 3em;
line-height:3em;
padding:0 .5em;
}
section {
margin:0 0 1em 0;
padding:.6em;
}
section h2{
font-size:.7em;
padding-bottom:1em;
}
section p{
font-size:.6em;
padding-bottom:1em;
}
</style>
</head>
<body>
<header>
<h1>Scriptum Titulus</h1>
</header>
<section>
<h2>Pagina Titulus</h2>
<p>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.</p>
<p>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.</p>
</section>
</body>
</html>
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.
<meta name="viewport" content="width=device-width, initial-scale=1">
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.
<style type="text/css">
header, section{ display: block; }
/* All elements */
* {
color:#FFF;
margin:0;
padding:0;
}
body {
background:#575757;
font-family:Helvetica, Arial, sans-serif;
}
header h1 {
background:rgba(0,0,0,.7);
font-size:.8em;
height: 3em;
line-height:3em;
padding:0 .5em;
}
section {
margin:0 0 1em 0;
padding:.6em;
}
section h2{
font-size:.7em;
padding-bottom:1em;
}
section p{
font-size:.6em;
padding-bottom:1em;
}
</style>
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.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Mobile Media Queries 101 | Lon Hosford</title>
<style type="text/css">
header, section{ display: block; }
/* All elements */
* {
color:#FFF;
margin:0;
padding:0;
}
body {
background:#575757;
font-family:Helvetica, Arial, sans-serif;
}
header h1 {
background:rgba(0,0,0,.7);
font-size:.8em;
height: 3em;
line-height:3em;
padding:0 .5em;
}
section {
margin:0 0 1em 0;
padding:.6em;
}
section h2{
font-size:.7em;
padding-bottom:1em;
}
section p{
font-size:.6em;
padding-bottom:1em;
}
/* 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;}
}
/* 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;}
}
</style>
</head>
<body>
<header>
<h1>Scriptum Titulus</h1>
</header>
<section>
<h2>Pagina Titulus</h2>
<p>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.</p>
<p>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.</p>
</section>
</body>
</html>
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.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Mobile Media Queries 101 | Lon Hosford</title>
<style type="text/css">
header, section{ display: block; }
/* All elements */
* {
color:#FFF;
margin:0;
padding:0;
}
body {
background:#575757;
font-family:Helvetica, Arial, sans-serif;
}
header h1 {
background:rgba(0,0,0,.7);
font-size:.8em;
height: 3em;
line-height:3em;
padding:0 .5em;
}
section {
margin:0 0 1em 0;
padding:.6em;
}
section h2{
font-size:.7em;
padding-bottom:1em;
}
section p{
font-size:.6em;
padding-bottom:1em;
}
/* 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;
}
}
</style>
</head>
<body>
<header>
<h1>Scriptum Titulus</h1>
</header>
<section>
<h2>Pagina Titulus</h2>
<p>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.</p>
<p>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.</p>
</section>
</body>
</html>
[ad name=”Google Adsense”]
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.
- 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.
[ad name=”Pearson Web Dev Books”]