css中device-width与width有什么区别
1、device-width
定义:定义输出设备的屏幕可见宽度。
不管你的网页是在safari翻开还是嵌在某个webview中,device-width都只跟你的设备有关,假如是统一个设备,那么他的值就不会变。
比方iphone6的device-width*device-height为375*667,而跟他的dpr等无关。
(引荐教程: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的window.screen.width,width相当于js的document.body.clientWidth了。
别的记载一下我这里适配huawei折叠屏的状况,由于此时还没真机,我只知道huawei展开状况下的辨论率为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了,这个属性将会被逐废弃。
相关视频教程引荐:css视频教程
以上就是css中device-width与width有什么不同的具体内容,更多请关注百分百源码网其它相关文章!