Book Image

Responsive Design High Performance

By : Dewald C Els, Dewald Els
Book Image

Responsive Design High Performance

By: Dewald C Els, Dewald Els

Overview of this book

Table of Contents (16 chapters)
Responsive Design High Performance
About the Author
About the Reviewers
Speeding Up Development with Design Concepts, Patterns, and Programs

Conditional content management

We spoke about media queries to some extent, but there's even more. It's hard to believe, but I'm sure by the time you read this, there'll be even more!

So far, all the media query conditions we did were in a single CSS file. Another approach is to split the files for each query, as follows:

<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 480px)" />

So, a typical <head> tag could look something like this:

<link href="small.css" rel="stylesheet" media="screen and (max-width: 480px)" />
<link href="medium.css" rel="stylesheet" media="screen (min-width: 481px) and (max-width: 720px)" />
<link href="desktop.css" rel="stylesheet" media="screen (min-width: 721px) and (max-width: 960px)" />
<link href="large.css" rel="stylesheet" media="screen (min-width: 961px) and (max-width: 1200px)" />