By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

CSS Media Queries

Reference on how to use CSS Media Queries, and useful vision examples that you can test directly in your own browser.

Created: 2012-02-25 17:45

Media Queries are useful if you find it hard to design something that looks good in lower screen resolutions, or if the design requires a pixel based layout. Media Queries continues where Media Types left, and they are supported by most browsers. As a bonus, they can also help control the layout on devices with smaller screens and or resolutions.

What is Media Queries

Media Queries are a feature of CSS, which most modern browsers currently support.

One of the advantages of using Media Queries, is that you don't have to obsess as much about having a fixed lyout. Also now that most browsers support some sort of magnifying and minifying, it has increasingly become less important.

Media Queries can be used to tell user agents, that if the client have a screen resolution which is smaller then 800px wide, then it should download this stylesheet. They work both with min-width, and with max-width.

Media queries example

The below example will tell the user agent, that the stylesheet is to be downloaded if the device is using a screen, and if the screen's resolution is between 321 and 768 pixels wide. After wich you would likely have another stylesheet to take over, or simply show the unstyled page.

<link href="css/tablet.css" rel="stylesheet" type="text/css" media="screen and (min-width: 321px) and (max-width: 768px)">

Its fine to simply define a min-width, if you don't want to re-design your entire site for those devices. The below stylesheet should only be loaded, if your resolution is above 1600px wide.

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