From the course: Advanced CSS Media Queries

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Testing for screen resolution

Testing for screen resolution - CSS Tutorial

From the course: Advanced CSS Media Queries

Start my 1-month free trial

Testing for screen resolution

- Screen resolutions vary with devices. Some screens are small, but they have very densely packed pixels. Other screens are big with big honkin' pixel. Fortunately, you can write media queries to style screens according to their resolution. These media queries might be most useful for swapping background images at different screen resolutions. For example, you could by default load a background image with a low resolution and at the screen would support it. You could have a higher resolution background image swap in via media query. That might be a really interesting use for this. But in any case, you can run a number of tests in regards to the screen resolution of any device in question and write styles accordingly. As you might expect, there are several variations on this. There is an absolute test for the resolution, then there's a min resolution and a max resolution. I'm going to show you all three. So let's…

Contents