這篇文章主要介紹了css3中device-width和width之間有什么區(qū)別，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)專注網(wǎng)站設(shè)計(jì),以設(shè)計(jì)驅(qū)動(dòng)企業(yè)價(jià)值的持續(xù)增長(zhǎng),網(wǎng)站，看似簡(jiǎn)單卻每一個(gè)企業(yè)都需要——設(shè)計(jì)，看似簡(jiǎn)潔卻是每一位設(shè)計(jì)師的心血 十載來(lái)，我們只專注做網(wǎng)站。認(rèn)真對(duì)待每一個(gè)客戶，我們不用口頭的語(yǔ)言來(lái)吹擂我們的優(yōu)秀，數(shù)千家的成功案例見(jiàn)證著我們的成長(zhǎng)。

1.device-width

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

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

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

2.width

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

輸出的是你的網(wǎng)頁(yè)可見(jiàn)區(qū)域的寬高，假設(shè)你的網(wǎng)頁(yè)是移動(dòng)端網(wǎng)頁(yè)嵌套在某個(gè)webview中，width實(shí)際上就是webview的寬高，如果在不同的瀏覽器中，width和height也有可能不一樣，又假如，你的頁(yè)面用的rem布局，并且對(duì)于retina屏來(lái)說(shuō)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，因?yàn)椴挥每紤]橫屏的情況

比如說(shuō)適配iphoneX,你已經(jīng)明確知道了iphoneX（375*812）的尺寸就可以用下面語(yǔ)句：

/*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在一個(gè)設(shè)備中是不會(huì)變的，他的值跟設(shè)備寬度有關(guān)，width在不同的布局方案或者不同的容器中展示都有可能不一樣，這里我覺(jué)得device-width就相當(dāng)于js的window.screen.width，width相當(dāng)于js的document.body.clientWidth了。

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

最開(kāi)始我在我的less中是這樣寫(xiě)的

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

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

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

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

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

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“css3中device-width和width之間有什么區(qū)別”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

分享名稱：css3中device-width和width之間有什么區(qū)別
鏈接分享：http://www.sd-ha.com/article8/geeiop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、網(wǎng)站建設(shè)、云服務(wù)器、定制開(kāi)發(fā)、網(wǎng)站營(yíng)銷、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)