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


本文摘自PHP中文网,作者青灯夜游,侵删。

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

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

1.device-width

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

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

比如iphone6的device-width*device-height为375*667,而跟他的dpr等无关。

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)的尺寸就可以用下面语句:

1

2

3

4

/*iphone x*/

@media only screen and (device-width:375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {

    .foriphoneX()

}

又比如最新的三星折叠屏

1

2

3

4

5

@media screen and (device-width: 586px) and (device-height: 820px){

    html{

        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-aspect-ratio,

最开始我在我的less中是这样写的

1

2

3

@media (device-aspect-ratio: 55/62) {

    /*适配*/

}

然后css中device-aspect-ratio被计算成小数了

1

2

3

@media (device-aspect-ratio: 0.887097) {

    /*适配*/

}

device-aspect-ratio是不支持小数的,因此匹配不上

所以查了一下怎么让less不执行55/62的结果,发现将属性用引号包起来,并且前面加上波浪号就可以了,像这样:

1

2

3

@media (device-aspect-ratio: ~"55/62") {

    /*适配部分*/

}

问题解决!

不过MDN上已经不推荐使用device-aspect-ratio了,这个属性将会被逐废弃,如果找到了更好的解决方案我也会用替代方案。

更多编程相关知识,请访问:编程入门!!

以上就是浅谈css3 device-width和width之间的差异的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

CSS3中background-orgin实现带相框照片显示效果-案例解析(代码实例 )

CSS3支持为网页添加多个背景图片吗

如何html标签和js中设置CSS3 var变量

word-wrap属性怎么用

CSS3中过渡和动画的区别是什么

html5和CSS3 动态气泡按钮的实现

CSS3的文本阴影text-shadow属性应该如何使用

transition-timing-function属性怎么用

CSS3怎么实现强制不换行

CSS3新增的伪类有哪些

更多相关阅读请进入《CSS3》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    正在狠努力加载,请稍候...