From the course: Advanced CSS Media Queries
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Testing for screen resolution - CSS Tutorial
From the course: Advanced CSS Media Queries
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
Understanding media in media queries3m 4s
-
(Locked)
Changing media in media queries5m 48s
-
(Locked)
Including width in media queries6m 16s
-
(Locked)
Including height in media queries3m 10s
-
(Locked)
Including aspect ratio in media queries3m 55s
-
(Locked)
Testing for monochrome devices2m 4s
-
(Locked)
Testing for screen orientation3m 23s
-
(Locked)
Testing for screen resolution4m 18s
-
(Locked)
Testing for hover and pointer5m 4s
-
-
-