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)的尺寸就可以用下面语句:
/*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){ 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中是这样写的
@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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
写给初用Nestj做项目的你(第二篇: 配置gitlab-runner操作gitlab) 如果不想自己搭...
考虑以下两段代码: 复制代码 代码如下: urlset url lochttp://www.caixw.com/ar...
前言 2021 年中国共产党将迎来建党 100 周年。百年来中国社会发生了沧桑巨变。从...
链入式是把所有的 样式 放在一个或多个 外部样式表文件 中,这个文件是以 css 为...
对于网页制作者来说,最烦琐的事情可能就是给页面中的图片或文字加链接了。假如...
最近做项目,遇到一个问题,在手机上要实现视频的全屏播放功能。测试了很久,终...
根据百度地图官方解释,在移动端 H5 页面中可监听下面这 4 个事件: touchstart, ...
web前端开发中避免不了要在页面上显示很多文章,如何才能从文中,文末点击快捷的...
本文将介绍 CSS 中一个非常有意思的属性 mask 。 顾名思义,mask 译为遮罩。在 C...
工欲善其事,必先利其器! 就在不久之前,Java领域的开发神器 IntelliJ IDEA 终...