0

I'm trying to teach myself css3 media queries, and I want I've confused myself over something small. I can't figure out the difference between width/height and device-width/device-height. Is device-width/device-height a css3 property only available to certain cell-phones or smaller computers? If so, is there an online resource which provides the sizes that you can recommend?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
JaPerk14
  • 1,664
  • 3
  • 24
  • 32

2 Answers2

0

This is a good source for common smartphone and tablet sizes already to go in CSS

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Normal width and height styles can be applied to any element on a page. For example if you want the width of a div tag to be set to 100px that's one method to do it.

To learn more about CSS media queries and how they work a good site to read is here http://www.htmlgoodies.com/beyond/css/introduction-to-css-media-queries.html

Anagio
  • 3,005
  • 9
  • 44
  • 81
0

The differences have been explained here: Difference between width and device-width in CSS media queries

Also you'll find a list of sizes here: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Here for a lot of different devices: http://nmsdvid.com/snippets/

And there's quite a nice diagram about a third if the page down: http://line25.com/tutorials/create-a-responsive-web-design-with-media-queries

Community
  • 1
  • 1
Digital Robot Gorilla
  • 397
  • 1
  • 5
  • 13