What is the difference between max

I need to develop some html pages for iphone/android phones, but what is the difference between max-device-width and max-width ? I need to use different css for different screen size.

@media all and (max-device-width: 400px)

@media all and (max-width: 400px)

What's the difference?

---

max-width is the width of the target display area, eg the browser

max-device-width is the width of the device's entire rendering area, ie the actual device screen

Same goes for max-height and max-device-height naturally.

---

max-width refers to the width of the viewport and can be used to target specific sizes or orientations in conjunction with max-height . Using multiple max-width (or min-width ) conditions you could change the page styling as the browser is resized or the orientation changes on a device like an iPhone.

max-device-width refers to the viewport size of the device regardless of orientation, current scale or resizing. This will not change on a device so cannot be used to switch style sheets or CSS directives as the screen is rotated or resized.

---

What do you think about using this style?

For all breakpoints which are mostly for "mobile device" I use min(max)-device-width and for breakpoints which are mostly for "desktop" use min(max)-width .

There are a lot of "mobile devices" that badly calculate width.

Look at http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml:

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
  /* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
  /* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
  /* some CSS here */
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
  /* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  /* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
  /* some CSS here */
}

链接地址: http://www.djcxy.com/p/87970.html

上一篇: 可以在类似于CSS的html文件中包含`templates`吗？

下一篇: max。有什么区别？