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)" />