浅谈css3 device-width和width之间的差异

本篇文章和大家谈谈css 媒体查询中device-width与width的区别。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

【推荐教程：CSS视频教程】

1.device-width

定义：定义输出设备的屏幕可见宽度。

不管你的网页是在safari打开还是嵌在某个webview中，device-width都只跟你的设备有关，如果是同一个设备，那么他的值就不会变。

比如 iphone6 的device-width*device-h ei ght为375*667,而跟他的d PR 等无关。

2.width

定义：定义输出设备中的页面可见区域宽度。

输出的是你的网页可见区域的宽高，假设你的网页是移动端网页嵌套在某个webview中，width实际上就是webview的宽高，如果在不同的浏览器中，width和height也有可能不一样，又假如，你的页面用的rem布局，并且对于retina屏来说dpr>1,meta标签中设置了content="width=device-width, in IT ial -s cale=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）的尺寸就可以用下面语句：

/*iphone x*/
@media only screen and (device-width:375px) and (device-height:812px) and (- webkit -device-pixel-ratio:3) {
    .foriphoneX()
}

又比如最新的三星折叠屏

@media screen and (device-width: 586px) and (device-height: 820px){
    ht ML {
        font- Size:  110px !important;
    }
}

总之，device-width在一个设备中是不会变的，他的值跟设备宽度有关，width在不同的布局方案或者不同的容器中展示都有可能不一样，这里我觉得 device-width就相当于js的window.screen.width，width相当于js的document.body.clientWidth了。

另外记录一下我这里适配华为折叠屏的情况，由于此时还没真机，我只知道华为展开情况下的分辨率为2200*2480,dpr什么的还不清楚，因此不知道device-width和device-height(我这边不能用width来做查询，原因关系到业务逻辑)，因此选了device-as PE ct-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了，这个属性将会被逐废弃,如果找到了更好的解决方案我也会用替代方案。

更多编程相关知识，请访问：编程入门！！

以上就是浅谈 css3 device-width和width之间的差异的详细内容，更多请关注其它相关文章！

总结

以上是为你收集整理的浅谈css3 device-width和width之间的差异全部内容，希望文章能够帮你解决浅谈css3 device-width和width之间的差异所遇到的问题。

如果觉得网站内容还不错，推荐好友。

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did199335

更新时间：2023-04-27 阅读：23次