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了。

另外記錄一下我這裡適配華為折疊螢幕的情況，由於此時還沒真機，我只知道華為展開情況下的分辨率為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有什麼差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！