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

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

| 高度和宽度与设备宽度和设备高度之间有何区别（简单而言）？

解决方法

device-width

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

width

... 描述输出设备的渲染表面的宽度（例如文档窗口的宽度或打印机上的页面框的宽度） 资源。,不止一个迟到的答案，希望对您有所帮助 在CSS媒体中，width和device-width之间的差异可以是 有点混乱，所以让我们对此加以说明。设备宽度是指 设备本身的宽度，换句话说， 装置。假设您的屏幕分辨率为1440 x 900。 表示屏幕的宽度为1440像素，因此设备的宽度为 1440像素。大多数手机的设备宽度为480px或更小， 包括流行的iPhone 4（设备宽度：320像素），尽管它 技术上具有640 x 960的分辨率。这是由于iPhone 4 视网膜显示，将两个设备像素填充到每个CSS像素上 屏幕。对于Ipad 3也是如此。其报道 设备宽度与之前的设备一样为768像素，即使 实际屏幕分辨率为1536px x 2048px。一般宽度比较大 不过，在创建响应式网页方面功能多样 当您希望专门定位移动设备时，设备宽度非常有用 设备（例如，不包括带有较小浏览器窗口的台式机） 从developer.mozilla.org开始， 宽度 价值：媒体：视觉，触觉 接受最小/最大前缀：是 宽度媒体功能描述渲染表面的宽度 输出设备的尺寸（例如文档窗口的宽度或 打印机上页面框的宽度）。 注意：当用户调整大小时，窗口浏览器会根据使用宽度和高度媒体功能的媒体查询，在适当时切换样式表。 !!! 我从javascriptkit中发现这篇文章非常有趣： http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml,如果您定义“ 0”，则表示在iphone，ipad，ipod和移动设备上打开页面时将呼叫特定的CSS。例如 ：

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

或者，如果您定义width，这意味着在调整窗口大小时将调用特定的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 /,如果您要制作跨平台应用程序（例如，使用phonegap / cordova）， 不要使用设备宽度或设备高度。而是在CSS媒体查询中使用width或height，因为Android设备会在device-width或device-height中产生问题。对于iOS，它工作正常。仅Android设备不支持device-width / device-height。,“ 0”描述输出设备的高度（意味着整个屏幕或页面，而不仅仅是渲染区域，例如文档窗口）。 “ 6” CSS属性指定元素内容区域的高度。内容区域位于元素的填充，边框和边距内。 资料来源：https://developer.mozilla.org/en/CSS/ 有关媒体查询的更多信息，请参见：http://www.w3.org/TR/css3-mediaqueries/