css中device-width与width有什么区别

本文为大家细致介绍了css媒体查询中device-width与width的区别，拥有一定的参照 价值，但愿可以帮忙到大家。device-width定义输出设施的屏幕可见宽度；width定义输出设施中的页面可见区域宽度。

1、device-width

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

无论你的网页是在safari打开还是嵌在某个webview中，device-width都只跟你的设施有关，要是是统一个设施，那么他的值就不会变。

比方苹果6的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"，你的苹果6上的width大小就为750px了。

我这里用得比拼用得多的是device-width和device-height，由于不消考虑横屏的状况

比方说适配苹果X,你已经明白晓得了苹果X（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有什么区另外细致内容，更多请关注 百分百源码网 其它相干文章！