Targeting Mobile Devices: Media Queries

So you want to build a mobile site? One way to do it is by targeting smaller screens with media queries. A media query says,”If your screen is this many pixels wide or less, use this stylesheet instead.” It looks like this in the head section of a website:


<link href="styles_mobile.css" rel="stylesheet" type="text/css" media"(max-width:320px)">

Then a second stylesheet needs to be created with the file name that was assigned with the href attribute (in this case “styles_mobile.css”). The second stylesheet can have totally different classes and values than the first so as to make it fit in a mobile viewport (in this case, of width 320px).┬áThis method has potential to save time as you need not create an entirely new site for mobile devices, you simply change the style of the original site.

In place of max-width, you might instead use max-device-width which tells the browser to ignore the width of the browser, instead look at the width of the device. In practice all this means is that you won’t be able to see the effects of a different stylesheet by merely changing the size of the browser window. To see changes you’d have to look at the site on different devices with different physical resolutions.

Leave a Reply

Wordpress theme JaeDubya © 2018 | All Right Reserved | Designed & coded by J. Arthur Wetenkamp