问CSS媒体查询中width和device-width的区别

EN

device-width是...

输出设备的

宽度(指整个屏幕或页面，而不仅仅是呈现区域，如文档窗口)。

Source。

width...

描述输出设备的呈现表面的宽度(如文档窗口的宽度或打印机上的页框的宽度)

Source。

一个迟来的回答不是希望它能帮助某些人

在CSS media中宽度和设备宽度之间的区别可能有点混乱，所以让我们稍微解释一下。 device -width指的是设备本身的屏幕宽度，换句话说，就是设备的屏幕分辨率。假设您的屏幕分辨率为1440x900。这意味着屏幕的宽度是1440像素，所以它的设备宽度是1440px。大多数手机的设备宽度为480px或更低，包括流行的iPhone 4(设备宽度: 320px)，尽管从技术上讲，它的分辨率为640x960。这要归功于iPhone 4的视网膜显示屏，它将两个设备像素塞进屏幕上的每个CSS像素中。IPad3也是如此；据报道，iPad3的设备宽度是768px，就像之前的产品一样，尽管它的实际屏幕分辨率是1536px x 2048px。一般而言，在创建响应式网页时，宽度更加通用，尽管当您希望专门针对移动设备(而不是具有小浏览器窗口的桌面)时，设备宽度是有用的。

来自 developer.mozilla.org ，的as

宽度:

值:媒体:视觉，触觉

接受最小/最大前缀:是

宽度介质功能描述输出设备的呈现表面的宽度(例如文档窗口的宽度，或打印机上的页框的宽度)。注意:当用户调整窗口大小时，浏览器使用宽度和高度媒体功能根据媒体查询适当地切换样式表。！

我发现这篇文章非常有趣，来自javascriptkit：http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

如果你定义device-width意味着当你在iphone，ipad，ipod和移动设备中打开你的页面时，你的特定的css是被调用的。例如：

@media only screen and (max-device-width:480px){
        body{
          color:red;
        }
    }

或者如果你定义了宽度，这意味着当你的窗口调整大小时，你的特定css会被调用。例如：

@media only screen and (min-width: 481px) and (max-width: 1024px) {
        body{
         color:yellow;
        }
    } 

有关更多信息，请查看http://webdesignerwall.com/tutorials/css3-media-queries、http://x7.fi/2010/02/12/how-to-fit-your-website-for-the-apple-ipad/