CSS media expressions

An example of using style sheet media queries, or media expressions. In a nutshell apply conditions to which style sheets are imported depending on the client device properties.

<link rel="stylesheet" type="text/css" media="screen, projection" href="css/main.css"/>
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 1600px), projection" href="css/main-hires.css"/>

In this case only devices with a minimum resolution of 1600 pixels in width will import the main-hires.css. This can help address the issues with font display on high resolution monitors (like the MacBook Pro).


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>