Pixel Perfect: How Understanding Pixels Affects Responsive Web Design

If, as a web designer or developer, you’ve even whimsically glanced at Responsive Web Design(RWD), you’ve probably noticed that it can rely heavily on media queries. And media queries rely heavily on pixels, among other things. Min-height, max-width, yadda yadda yadda. If you’re trying to catch a breakpoint in your design, you rely on pixels to trigger the media query to catch it.

So if you want to target a device, such as the relatively new (as of this writing) Samsung Galaxy S5, you could target it with the following query:

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

//Your changes for this query go in here

}

What this query says is that if the device is a screen(monitors, phones, etc) and the screen has a maximum width of 1080 pixels, apply these style changes.

But… This can cause two issues. One is that if the user resizes the browser for some reason, say to look at the site while they are doing something else in a different window, these changes won’t take effect. That’s because even though the browser size has changed, the amount of pixels that make up the screen width have not. The query is not triggered and the changes don’t take effect.

This may or may not be a scenario you need to take into account; there are some users out there that do Surf The ‘Net(that’s still a saying, right…??) this way and could be something you need to plan for. If this is an issue you can just drop the screen and portion of the query and then it will fire whenever the browser window has a max-width of 1080px.

The second issue is a little more complicated. You see, media queries work off of CSS pixels and not device pixels. And while CSS pixels usually equal device pixels, that isn’t the case 100% of the time.

What you need to know is the CSS to device pixel ratio.

In many hi-res devices, the device will scale down a webpage so that 1 device pixel will equal 2 CSS pixels. This allows the device to show far more detail than if it used the standared 1:1 pixel ratio.

Unfortunately, it can also jack up your design, bro.

Say you want to target a 1080px pixel device. Well, if you are using the Galaxy S5 as your benchmark, you have 432 pixels per inch(ppi) to account for. But then, if you look at it on a lower-res screen, such as an old school computer monitor which has 96 ppi, you’re going to get an output that looks completely different.

So what’s to be done?

Well, for starters, you could toss your computer out the window, throw yourself into a corner and weep for your immortal soul.

If that isn’t your cup of tea, you could use this handy little “trick” (in the head tag along with all his meta tag buddies), that most people use but don’t really understand:

< meta name="viewport" width="device-width" >

What this does is tell the device to use the width of the device to determine the pixel ratio; making even high-res devices have a ratio of 1:1. This will make your media queries work consistently across all devices, regardless of their native pixel ratio. You can then make logical decisions about how your site will look across all devices and screens of a certain pixel width and, for all intensive purposes, ignore a devices resolution since you are working with a 1:1 ratio.

Now go forth into the world and make awesomeness.

Have you found other ways to tame the wildness of the mobile device jungle? I’d love to hear about it in the comments below!