Question

高度和宽度与设备宽度和设备高度之间有什么区别（简单来说）？

Answer 1

device-width是......

输出设备的宽度（意味着整个屏幕或页面，而不仅仅是渲染区域，例如文档窗口）。

Source

width ...

描述输出设备渲染表面的宽度（例如文档窗口的宽度，或打印机上页面框的宽度）

Source

Answer 2

不仅仅是一个迟到的答案希望它会帮助一些人

在CSS媒体中，宽度和设备宽度之间的差异可以是a 有点混乱，所以我们稍微阐述一下。 设备宽度是指 设备本身的宽度，换句话说，屏幕分辨率设备。让我们说你的屏幕分辨率是1440 x 900.这个表示屏幕的宽度为1440像素，因此它的设备宽度为 1440px。大多数手机的设备宽度为480px或更低，尽管如此，包括流行的iPhone 4（设备宽度：320px）技术上具有640 x 960分辨率。这是由iPhone 4的视网膜显示，将两个设备像素分成每个CSS像素屏幕。对于Ipad 3也是如此;据报道设备宽度是768px，就像它的前辈一样，即使它的实际屏幕分辨率为1536px x 2048px。一般宽度更多但是，在创建响应式网页方面具有多样性当您希望专门定位移动设备时，设备宽度非常有用设备（而不是具有小浏览器窗口的桌面）

来自 developer.mozilla.org ，

宽度：
  价值：媒体：视觉，触觉
  接受最小/最大前缀：是

宽度媒体功能描述了渲染表面的宽度   输出设备的宽度（例如文档窗口的宽度，或者   打印机上页面框的宽度）。

  注意：当用户调整窗口浏览器大小时，根据使用宽度和高度媒体功能的媒体查询，根据需要切换样式表。 !!!

我从javascriptkit非常有趣地发现了这篇文章： http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

Answer 3

如果您定义device-width表示您在iphone，ipad，ipod＆amp;中打开页面时调用了特定的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/

Answer 4

如果您正在制作跨平台应用（例如，使用phonegap / cordova），那么，

不要使用设备宽度或设备高度。而是在CSS媒体查询中使用宽度或高度，因为Android设备会在设备宽度或设备高度方面产生问题。对于iOS，它工作正常。只有Android设备不支持设备宽度/设备高度。

Answer 5

device-width描述了输出设备的高度（意味着整个屏幕或页面，而不仅仅是渲染区域，例如文档窗口）。

height CSS属性指定元素内容区域的高度。内容区域位于元素的填充，边框和边距内。

来源：https://developer.mozilla.org/en/CSS/

有关媒体查询的更多信息，请参阅：http://www.w3.org/TR/css3-mediaqueries/

CSS媒体查询中宽度和设备宽度之间的差异

5 个答案: