1.device-width

定義：定義輸出設(shè)備的屏幕可見寬度。

不管你的網(wǎng)頁是在safari打開還是嵌在某個webview中，device-width都只跟你的設(shè)備有關(guān)，如果是同一個設(shè)備，那么他的值就不會變。

比如iphone6的device-width*device-height為375*667,而跟他的dpr等無關(guān)。

2.width

定義：定義輸出設(shè)備中的頁面可見區(qū)域?qū)挾取?/p>

輸出的是你的網(wǎng)頁可見區(qū)域的寬高，假設(shè)你的網(wǎng)頁是移動端網(wǎng)頁嵌套在某個webview中，width實際上就是webview的寬高，如果在不同的瀏覽器中，width和height也有可能不一樣，又假如，你的頁面用的rem布局，并且對于retina屏來說dpr>1,meta標(biāo)簽中設(shè)置了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,你已經(jīng)明確知道了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在一個設(shè)備中是不會變的，他的值跟設(shè)備寬度有關(guān)，width在不同的布局方案或者不同的容器中展示都有可能不一樣，這里我覺得device-width就相當(dāng)于js的window.screen.width，width相當(dāng)于js的document.body.clientWidth了。

另外記錄一下我這里適配華為折疊屏的情況，由于此時還沒真機，我只知道華為展開情況下的分辨率為2200*2480,dpr什么的還不清楚，因此不知道device-width和device-height(我這邊不能用width來做查詢，原因關(guān)系到業(yè)務(wù)邏輯)，因此選了device-aspect-ratio,

最開始我在我的less中是這樣寫的

@media (device-aspect-ratio: 55/62) {
    /*適配*/
}    

然后css中device-aspect-ratio被計算成小數(shù)了

@media (device-aspect-ratio: 0.887097) {
    /*適配*/
}  

device-aspect-ratio是不支持小數(shù)的，因此匹配不上

所以查了一下怎么讓less不執(zhí)行55/62的結(jié)果，發(fā)現(xiàn)將屬性用引號包起來，并且前面加上波浪號就可以了，像這樣：

@media (device-aspect-ratio: ~"55/62") {
    /*適配部分*/
}

問題解決！

不過MDN上已經(jīng)不推薦使用device-aspect-ratio了，這個屬性將會被逐廢棄,如果找到了更好的解決方案我也會用替代方案。

到此這篇關(guān)于css3媒體查詢中device-width和width的區(qū)別詳解的文章就介紹到這了,更多相關(guān)css3 device-width width內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論