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

Question

高度和宽度以及设备宽度和设备高度之间有什么区别(简单来说)？

Answer 1

device-width 是个...

输出设备的宽度(意味着整个屏幕或页面,而不仅仅是渲染区域,例如文档窗口).

来源.

该width...

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

来源.

Answer 2

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

在CSS媒体中,宽度和设备宽度之间的差异可能有点混乱,所以让我们稍微阐述一下.device-width指设备本身的宽度,换句话说,指 设备的屏幕分辨率.让我们说你的屏幕分辨率是1440 x 900.这意味着屏幕是1440像素,所以它的设备宽度为1440像素.大多数手机的设备宽度为480px或更低,包括流行的iPhone 4(设备宽度:320px),尽管它在技术上具有640 x 960的分辨率.这是由于iPhone 4的视网膜显示器,它将两个设备像素压缩到屏幕上的每个CSS像素中.对于Ipad 3也是如此; 尽管其实际屏幕分辨率为1536px x 2048px,但它报告的设备宽度与其前代产品一样是768px.通常,宽度在创建响应式网页时更为通用,但是当您希望专门定位移动设备(而不是具有小型浏览器窗口的桌面)时,设备宽度非常有用

来自 developer.mozilla.org ,

width:
值:Media:visual,tactile
接受min/max前缀:yes

宽度媒体功能描述输出设备的渲染表面的宽度(例如文档窗口的宽度,或打印机上页面框的宽度).

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

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