27

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

4

5 回答 5

24

device-width是个...

输出设备的宽度（指整个屏幕或页面，而不仅仅是呈现区域，例如文档窗口）。

来源。

width... _

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

来源。

于 2011-04-19T12:18:32.757 回答
9

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

在 CSS 媒体中，宽度和设备宽度之间的差异可能有点混乱，所以让我们稍微解释一下。device-width是指 设备本身的宽度，也就是设备的屏幕分辨率. 假设您的屏幕分辨率为 1440 x 900。这意味着屏幕的宽度为 1440 像素，因此它的设备宽度为 1440 像素。大多数手机的设备宽度为 480 像素或更低，包括流行的 iPhone 4（设备宽度：320 像素），尽管它在技术上具有 640 x 960 分辨率。这是由于 iPhone 4 的视网膜显示屏，它将两个设备像素塞进屏幕上的每个 CSS 像素中。Ipad 3 也是如此。尽管它的实际屏幕分辨率是 1536px x 2048px，但它报告的设备宽度就像它的前辈一样是 768px。一般来说，在创建响应式网页时，宽度更加通用，尽管当您希望专门针对移动设备（而不是具有小浏览器窗口的桌面）时，设备宽度很有用

来自 developer.mozilla.org ，

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

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

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

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

于 2013-08-06T07:57:15.567 回答
2

如果您定义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/

于 2011-04-19T12:30:46.290 回答
0

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

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

于 2014-12-26T07:15:47.707 回答
-5

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

而heightCSS 属性指定元素内容区域的高度。内容区域位于元素的内边距、边框和边距内。

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

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

于 2011-04-19T12:19:30.547 回答