本篇文章和大家谈谈 CSS 媒体查询中 device-width 与 width 的区别, 具有一定的参考价值, 希望可以帮助到大家.
1,device-width
定义: 定义输出设备的屏幕可见宽度.
不管你的网页是在 Safari 打开还是嵌在某个 webview 中, device-width 都只跟你的设备有关, 如果是同一个设备, 那么他的值就不会变.
比如 iphone6 的 device-width*device-height 为 375*667, 而跟他的 dpr 等无关.
- (推荐教程: https://www.html.cn/css/ 教程)
- 2,width
定义: 定义输出设备中的页面可见区域宽度.
输出的是你的网页可见区域的宽高, 假设你的网页是移动端网页嵌套在某个 webview 中, width 实际上就是 webview 的宽高, 如果在不同的浏览器中, width 和 height 也有可能不一样, 又假如, 你的页面用的 rem 布局, 并且对于 retina 屏来说 dpr>1,meta 标签中设置了 content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no,viewport-fit=cover", 你的 iphone6 上的 width 大小就为 750px 了.
我这里用得比较用得多的是 device-width 和 device-height, 因为不用考虑横屏的情况
比如说适配 iphoneX, 你已经明确知道了 iphoneX(375*812) 的尺寸就可以用下面语句:
- @media screen and (device-width: 586px) and (device-height: 820px){
- HTML{
- font-size: 110px !important;
- }
- }
总之, device-width 在一个设备中是不会变的, 他的值跟设备宽度有关, width 在不同的布局方案或者不同的容器中展示都有可能不一样, 这里我觉得 device-width 就相当于 JS 的 Windows.screen.width,width 相当于 JS 的 document.body.clientWidth 了.
另外记录一下我这里适配华为折叠屏的情况, 由于此时还没真机, 我只知道华为展开情况下的分辨率为 2200*2480,dpr 什么的还不清楚, 因此不知道 device-width 和 device-height(我这边不能用 width 来做查询, 原因关系到业务逻辑), 因此选了 device-aspect-ratio,
最开始我在我的 Less 中是这样写的
- @media (device-aspect-ratio: 55/62) {
- /* 适配 */
- }
然后 CSS 中 device-aspect-ratio 被计算成小数了
- @media (device-aspect-ratio: 0.887097) {
- /* 适配 */
- }
device-aspect-ratio 是不支持小数的, 因此匹配不上
所以查了一下怎么让 Less 不执行 55/62 的结果, 发现将属性用引号包起来, 并且前面加上波浪号就可以了, 像这样:
- @media (device-aspect-ratio: ~"55/62") {
- /* 适配部分 */
- }
问题解决!
不过 MDN 上已经不推荐使用 device-aspect-ratio 了, 这个属性将会被逐废弃.
更多 Web 开发 https://www.html.cn/ 相关知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/css/17908.html