Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
glenn romaniuk
33,738 Pointsmedia queries - difference between width and device-width
What is the difference between them and where would I use these two variants?
3 Answers
Carsten Pleiser
8,386 PointsHi Glenn
Device-Width refers to the width of the device itself, e.g. the screen resolution of the device. Let's say your screen resolution is 1000 x 900, this means the screen is 1000 pixels across, so it has a device width of 1000px. Most mobile phones have a device-width of 480px or lower (e.g. iPhone 4 --> device-width: 320px)
In general width is more versatile when it comes to creating responsive websites. device-width is useful when you wish to specifically target mobile devices (and not desktops with a small browser window for example), as rarely do desktops have screen resolutions below a certain number such as 320px x 480px.
Hope this explains the differences a bit.
Have a lovely evening.
Carsten
glenn romaniuk
33,738 Pointsoh ya now i get it yes this explains allot makes sense thanks for the help
glenn romaniuk
33,738 PointsWith retna as all these hi-def displays how does media queries know how to calculate the correct pixel match? For example iphone 5 and ipad air.