Building responsive CSS3 with Mobile devices in mind

January 12th, 2013

With the ever-increasing popularity of mobile devices capable of browsing and reading web content, it’s become increasingly necessary for those with an existing web presence, to be sure that mobile users are able to access and experience the content at a similar level of effectiveness and convenience as desktop users. In many cases, such as e-commerce, or large SaaS frameworks, this may require the use of a separate, and custom website solution. However, in many cases on the web, there is no need for such an extensive effort in a bid to gather traffic via mobile devices. This is where CSS3 media queries come in.

Containing a group of additional, or re-factored CSS styles within a media query allows you to change the styling of your site depending on browser window size, device resolution, or device screen size.

First of all, you’ll want to

The most basic of these is just a simple query that detects the size of the browser window, like so:

@media screen and (max-width: 1000px) {}

This string tells the browser, that when the browser window is only capable of, or is resized to 1000 pixels, or lower, to use the styles contained within. NOTE: To ensure that these styles load properly, always put your media queries at the end of your stylesheet, if you’re referencing the query in the parent stylesheet.

Conversely, if you needed to detect any state larger than 1000 pixels, you would write your query this way:

@media screen and (min-width: 1000px) {}

Now, if you need to target a specific device (say, a kind of tablet or other portable device) you can make the query only read what the actual screen size of the device is, regardless of the browser window size:

@media screen and (min-device-width: 1000px) {}

Depending on the kind of mobile devices you wish to support, however, with modern high-density screens, it’s a good idea to append your query with the resolution density to ensure that your queries run properly. Below are the most commonly used ones.

only screen and (min-device-pixel-ratio : 1.5)
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (-moz-min-device-pixel-ratio : 1.5) {}

Using these handy CSS3 tricks, you can quite easily create a whole new mobile-ready look for your site, with just a few styles.