By Lon Hosford
You have a plethora of configuration approaches with using CSS Media Queries in creating a mobile first design.
The previous tutorials we places all the CSS into the HTML document. That was fine for a learning activity. You know that we need to use external CSS files. That means using the HTML link element in the document head section.
The @media CSS selector is just plain CSS so we can use it in an external CSS file. So all the CSS we had in the document style element can be put into a CSS file and it works the same.
Save 20% on Publish Your Flappy Bird Clone iPhone Game, EZ & No Coding!
Our CSS length was short and tailor for quick absorption in a learning activity. You can count on the CSS lines growing quickly as you start to include your design styling not only for one layout but possibly for multiple screen layouts. The CSS file can get pretty long. So you can consider an approach to break the CSS into separate files for each minimum screen width. Then you can just put the media query CSS in each file. This approach also works.
[ad name=”Google Adsense”]
Then consider that the link element has the media attribute that uses the same media query syntax as the @media CSS selector. That allows you attach a CSS file only when the media query is true. It also negates the need for the media selector in the file. Essentially you are saying all the CSS in a file is for a specific group of screen widths starting at a certain minimum and expanding until another media query takes over any selectors and properties.
In this post we are taking the last example and breaking it up this way. One file for the base css and one file for each target minimum screen width.
Configuration Approaches and Refactoring Demonstration
This video covers the CSS Mobile First Responsive Design Configuration Approaches. It also demonstrates the refactoring of the last tutorial’s files into external files for the base and each target minimum screen width.
[iframe https://www.youtube.com/embed/4OUWvKYpLw8 640 360]
[ad name=”Pearson Web Dev Books”]
Source Files for the video series: Download
The link Element media Attribute
These are the link elements for each separate CSS file we plan to use.
- base.css
- screen-min-320.css
- screen-min-768.css
- screen-min-1024.css
The @media selector media query syntax is becomes the media attribute’s value. Then you order the files starting with the base followed by the CSS file for the smallest design width. The you progressively add the CSS files for each next minimum width target.
<title>CSS Mobile Media Queries 101 | Lon Hosford</title> <!-- Base css --> <link rel="stylesheet" type="text/css"href="base.css" /> <!-- True if greater than or equal to 320px --> <link rel="stylesheet" type="text/css" media="only screen and (min-width: 320px)" href="screen-min-320.css" /> <!-- True if greater than or equal to 768px --> <link rel="stylesheet" type="text/css" media="only screen and (min-width: 768px)" href="screen-min-768.css" /> <!-- True if greater than or equal to 1024px --> <link rel="stylesheet" type="text/css" media="only screen and (min-width: 1024px)" href="screen-min-1024.css" /> </head>
Save 20% on Master Your iPhone and Be 10X More Productive!
Each of the CSS files could contain the @media selector. If that was the case, then you do not need the link element media attribute.
A drawback is that we have increased number of network HTTP requests. Bandwidth performance is impacted by many items. Files do lend themselves to caching. So you need to perform your own bandwidth analysis to see if using multiple CSS files has any significant impact on your performance.
A happy medium might be one CSS file for the base and one for handling screen width detection.
- base.css
- screen.css
In that case you would include the @media selectors in the screen.css file.
Complete practice.html 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> <!-- Base css --> <link rel="stylesheet" type="text/css"href="base.css" /> <!-- True if greater than or equal to 320px --> <link rel="stylesheet" type="text/css" media="only screen and (min-width: 320px)" href="screen-min-320.css" /> <!-- True if greater than or equal to 768px --> <link rel="stylesheet" type="text/css" media="only screen and (min-width: 768px)" href="screen-min-768.css" /> <!-- True if greater than or equal to 1024px --> <link rel="stylesheet" type="text/css" media="only screen and (min-width: 1024px)" href="screen-min-1024.css" /> </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>
The CSS File Code
base.css
/* Base 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;
}
Save 20% on iPhone Camera Essentials!
screen-min-320.css
/* Smallest Screen Size Design Target */
/* Example: iPhone portrait */
/* True if width greater than or equal to 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;
}
screen-min-768.css
/* Example: iPad portrait */
/* True if width greater than or equal to 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;
}
screen-min-1024.css
/* Examples: iPad landscape, Laptops and Desktops */
/* True if width greater than or equal to 1024px */
body {background:#FF0066;}
header h1 {
font-size:2em;
height:3.2em;
line-height:3.2em;
}
section {
max-width:1200px;
padding:.9em;
}
[ad name=”Google Adsense”]