From the course: Creating a Responsive Web Design: Advanced Techniques

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Using CSS media queries for device pixel ratio

Using CSS media queries for device pixel ratio - CSS Tutorial

From the course: Creating a Responsive Web Design: Advanced Techniques

Start my 1-month free trial Buy for my team

Using CSS media queries for device pixel ratio

“

- [Voiceover] So the first two graphics we're gonna switch out for high definition versions are gonna be the banner and the lounge graphic in the atmosphere section. So let's go back to our css file. Let's scroll all the way down to the bottom, after all of the media queries that determine the size of the user's screen and let's come down here and add some new media queries which are going to query the device pixel ratio. So we're gonna start by typing @ media then a space and now because we need to do two different settings one for iOS devices, which are Apple's iPad and iPhone and the regular device pixel ratio for all other devices and then to make this easier to see, let's hit a return, on the next line let's type screen and another set of parentheses. We want to determine the max width just like we did earlier. So type max width colon space 1000 pixels then outside the parentheses we're gonna type and again, another set of parentheses and then inside of theses parentheses were…

Contents