摘要：這種使用簡(jiǎn)單，但是兼容性不太好。這種顏色有陰影，估計(jì)過(guò)不了設(shè)計(jì)大佬的那關(guān)。最后會(huì)把對(duì)應(yīng)的編譯出來(lái)，這種兼容性好，就是依賴于插件。這種兼容好，但是會(huì)和偽類沖突，也是我司采用的方式。

工作以后，大部分的業(yè)務(wù)工作都是基于移動(dòng)端H5的，開(kāi)發(fā)過(guò)程中學(xué)習(xí)了很多東西，遇到過(guò)許多問(wèn)題，諸如rememcss pxdevice px等，本文純屬個(gè)人的歸納總結(jié)，如有問(wèn)題，請(qǐng)指出親噴~

本文主要是講解移動(dòng)端的響應(yīng)式布局， 但是在真正進(jìn)入之前， 先了解一些概念。

通常在PC端上面，我們并不需要考慮設(shè)備像素和css像素之間的差別，以目前的pc來(lái)看，1個(gè)設(shè)備像素通常等于1個(gè)css像素。可以使用screen.width/height來(lái)獲取我們屏幕的寬高設(shè)備像素。

screen.width // 1920
screen.height // 1080

如果你給一個(gè)元素的寬度為width: 192px; 那么你的屏幕上(假設(shè)你的屏幕寬度像素為1920)可以在一行上顯示10個(gè)該元素。原理則是因?yàn)槲覀兊腜C中1個(gè)設(shè)備像素等于1個(gè)css像素。

當(dāng)用戶放大或者縮小屏幕時(shí)（按住ctrl+滾動(dòng)鼠標(biāo)輪，也就是改變zoom值），則有所不同。此時(shí)，我們的設(shè)備像素仍然沒(méi)有改變，還是1920*1080，css像素的數(shù)量也沒(méi)有改變，但是css像素大小變了。 假設(shè)放大到200%， 那么1個(gè)css像素就等于兩個(gè)設(shè)備像素， 以此類推。

以下是引用ppk大神的三張圖片， 下面深藍(lán)色為設(shè)備像素， 上面淺藍(lán)色為css像素

正常情況下：

縮小時(shí)：

放大時(shí)：

screen.width/heihgt取的是屏幕的寬高，單位是是css像素。

window.innerWidth/innerHeight取的是網(wǎng)頁(yè)區(qū)域的寬高， 單位是css像素。

當(dāng)你改變zoom值時(shí)， screen不會(huì)改變， innerWidth/height會(huì)改變。

viewport是一個(gè)限制html元素的功能， 可以理解為html元素的上一層元素。聽(tīng)起來(lái)有點(diǎn)難以理解， 下面講一個(gè)例子：

假設(shè)， 你給某個(gè)div元素設(shè)置了width：50%的樣式后， 當(dāng)你縮小放大瀏覽器的時(shí)候，你會(huì)發(fā)現(xiàn)div元素總是占據(jù)了50%的寬度，我們知道，寬度百分比是依賴它的包裹元素（假設(shè)是body）， 那么問(wèn)題就回到了body的寬度身上。通常在沒(méi)有設(shè)置寬度的情況下，所有塊級(jí)元素都占用其父級(jí)寬度的100%。所以body和html元素一樣寬。那么html元素有多寬呢，默認(rèn)情況下它和瀏覽器窗口一樣寬，這也就是為什么div總是占據(jù)瀏覽器寬度的50%，而html元素則是受限于viewport(和viewport占據(jù)一樣的寬度)，換句話說(shuō)，viewport完全等于瀏覽器窗口，而且它不是HTML語(yǔ)言元素，所以你無(wú)法通過(guò)使用css對(duì)其進(jìn)行影響。

我們可以通過(guò)document.documentElement.clientWidth/clientHeight來(lái)獲取viewport的寬高， 它的單位是css像素。

上面兩者都能夠獲取網(wǎng)頁(yè)區(qū)域大小， 但是他們之間還是有區(qū)別的。 前者不包含滾動(dòng)條， 后者包含。

我們可以通過(guò)document.documentElement.offsetWidth/offsetHeight來(lái)獲取html元素的寬高， 它的單位是css像素。

event的三對(duì)屬性：

pageX/Y: 給出CSS像素中相對(duì)于html元素的坐標(biāo)

clientX/Y: 給出CSS像素中相對(duì)于viewport的坐標(biāo)

screenX/Y: 給出設(shè)備像素中相對(duì)于屏幕的坐標(biāo)

媒體查詢：

基于viewport（documentElement .clientWidth/Height）

@media all and (max-width: 400px)

基于屏幕（screen.width）

@media all and (max-device-width: 400px)

在默認(rèn)情況下，一般來(lái)講，移動(dòng)設(shè)備上的viewport都是要大于瀏覽器可視區(qū)域的，這是因?yàn)榭紤]到移動(dòng)設(shè)備的分辨率相對(duì)于桌面電腦來(lái)說(shuō)都比較小，所以為了能在移動(dòng)設(shè)備上正常顯示那些傳統(tǒng)的為桌面瀏覽器設(shè)計(jì)的網(wǎng)站，移動(dòng)設(shè)備上的瀏覽器都會(huì)把自己默認(rèn)的viewport設(shè)為980px或1024px（也可能是其它值，這個(gè)是由設(shè)備自己決定的），但帶來(lái)的后果就是瀏覽器會(huì)出現(xiàn)橫向滾動(dòng)條，因?yàn)闉g覽器可視區(qū)域的寬度是比這個(gè)默認(rèn)的viewport的寬度要小的。下圖列出了一些設(shè)備上瀏覽器的默認(rèn)viewport的寬度。

以下是關(guān)于各瀏覽器的viewport

前面介紹了viewport的概念， 但是在移動(dòng)端的時(shí)候， viewport并不那么容易理解， ppk在移動(dòng)端提出了三個(gè)viewport的概念。

Layout viewport
也就是布局viewport，即默認(rèn)的瀏覽器viewport ， 并且可以通過(guò)document.documentElement.clientWidth 來(lái)獲取。

圖片引用自深入理解viewport

visual viewport
layout viewport 的寬度是默認(rèn)的瀏覽器viewport，所以我們還需要一個(gè)viewport來(lái)代表可視區(qū)域的大小，ppk把這個(gè)viewport叫做 visual viewport。ppk說(shuō)visual viewport的寬度可以通過(guò)window.innerWidth 來(lái)獲取， 然而我獲取的時(shí)候發(fā)現(xiàn)得到的值是網(wǎng)頁(yè)區(qū)域的值。

圖片引用自深入理解viewport

ideal viewport
有了兩個(gè)viewport并不ok， 因?yàn)槲覀兗炔幌胱層脩魸L動(dòng)滾動(dòng)條來(lái)瀏覽我們的網(wǎng)頁(yè)，也不想用戶盯著縮小了的pc網(wǎng)頁(yè)瀏覽， 所以有了第三個(gè)viewport。 所謂的ideal viewport則是當(dāng)layout viewport等于屏幕的寬度， 如ip6，它的ideal viewport就是375px。

開(kāi)發(fā)過(guò)h5的應(yīng)該都知道， 我們經(jīng)常會(huì)把下面這句代碼復(fù)制到head標(biāo)簽中：

它的作用其實(shí)就是設(shè)置了ideal viewport。以下是它的6個(gè)屬性：

那么如果我們想設(shè)置ideal viewport， 只需要把width設(shè)置成width-device或者把initial-scale設(shè)置成1.0就可以了。

前者比較容易理解， 后者設(shè)置成1就可以是為什么？ 首先要理解設(shè)置成1.0就是意味著沒(méi)有縮放，而這樣卻可以達(dá)到ideal viewport的效果， 那么很明顯， 縮放是相對(duì)于 ideal viewport來(lái)進(jìn)行縮放的，當(dāng)對(duì)ideal viewport進(jìn)行100%的縮放，也就是縮放值為1的時(shí)候，不就得到了 ideal viewport。

如果兩個(gè)屬性都能設(shè)置ideal viewport， 那么當(dāng)兩個(gè)屬性沖突時(shí)怎么解決？

遇到這種情況時(shí)，瀏覽器會(huì)取它們兩個(gè)中較大的那個(gè)值。例如，當(dāng)width=400，ideal viewport的寬度為320時(shí)，取的是400；當(dāng)width=400， ideal viewport的寬度為480時(shí)，取的是ideal viewport的寬度。

在移動(dòng)端中， 1個(gè)css像素并不等于1個(gè)設(shè)備像素， 而是取決于設(shè)備像素比（物理像素（設(shè)備像素）/獨(dú)立像素（css像素）），像Iphone的Retina屏幕， 就有2倍屏（ip6s）、3倍屏(ip6 plus)， 也就是設(shè)備像素比的值分別是2和3，即1個(gè)css像素等同于4個(gè)設(shè)備像素或者9個(gè)， 如圖：

并且， 我們可以通過(guò)window.devicePixelRatio來(lái)獲取設(shè)備像素比dpr。

問(wèn)題的產(chǎn)生

公司的設(shè)計(jì)大佬通常給的設(shè)計(jì)稿是基于ip6s的， 也就是750px（i6s的屏幕是375px，而且是上面說(shuō)的兩倍屏，所以有750個(gè)物理像素）。假設(shè)設(shè)計(jì)稿上面有個(gè)1px的border，我們通常直接這樣寫(xiě)：

border {
    border: 1px solid #ccc;
}

然后設(shè)計(jì)審核的時(shí)候就被打回來(lái)了， 因?yàn)樵O(shè)計(jì)覺(jué)得變大了，也就是他覺(jué)得是2px的線了。

究其原因，是因?yàn)樵O(shè)計(jì)稿是750px， 里面的1px實(shí)際上在真機(jī)只有0.5px，所以就有了著名的1px問(wèn)題。

問(wèn)題的解決

1.直接使用0.5px
在iOS8下，蘋(píng)果系列都已經(jīng)支持0.5px了，那么意味著在devicePixelRatio = 2時(shí)，我們可以借助媒體查詢來(lái)處理：著作權(quán)歸作者所有。

@media (-webkit-min-device-pixel-ratio: 2) {
    .border {
        border-width: 0.5px
    }
}

這種使用簡(jiǎn)單，但是兼容性不太好。

2.使用border-image或者background
也就是拿一張圖片，一半透明，一半是我們想要的顏色，然后填充上去， 具體的例子就不講了， 這種基本沒(méi)啥人會(huì)用， 改個(gè)顏色還要修改圖片，太麻煩了。

3.box-shadow

.box-shadow-1px {
    box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}

這種顏色有陰影， 估計(jì)過(guò)不了設(shè)計(jì)大佬的那關(guān)。

4.PostCSS的插件postcss-write-svg
直接借助插件幫助我們實(shí)現(xiàn)， 其實(shí)也就是postcss幫我們生成圖片而已。

@svg 1px-border { 
    height: 2px; 
    @rect { 
        fill: var(--color, black); width: 100%; height: 50%; 
    } 
} 
.example { border: 1px solid transparent; 
           border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
}

最后Postcss會(huì)把對(duì)應(yīng)的css編譯出來(lái)， 這種兼容性好， 就是依賴于插件。

.example { border: 1px solid transparent; 
           border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" height="2px"%3E%3Crect fill="%2300b1ff" width="100%25" height="50%25"/%3E%3C/svg%3E") 2 2 stretch
}

5.偽類 + transform 實(shí)現(xiàn)
原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 縮小一半，原先的元素相對(duì)定位，新做的 border 絕對(duì)定位。

.scale-1px{
position: relative;
border:none;
}
.scale-1px:after{
content: "";
position: absolute;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}

這種兼容好， 但是會(huì)和偽類沖突， 也是我司采用的方式。

6.縮小viewport
原理是使用meta標(biāo)簽中的viewport， 也就是上面所說(shuō)的設(shè)置viewport， 將整個(gè)頁(yè)面縮小0.5倍， 這個(gè)主要是麻煩在其他的元素也要跟著放大一倍再縮小， 為了這個(gè)小問(wèn)題而這樣， 似乎有點(diǎn)得不償失。

然而， 淘寶的flexible方案（rem布局，見(jiàn)下文）幫我們搞定了這個(gè)問(wèn)題。

上面提到了flexible和rem的布局方案， 在剛推出的時(shí)候， 確實(shí)很火， 公司的一些項(xiàng)目目前仍然是采用該方案， 這里簡(jiǎn)單的說(shuō)下其原理。

px、em、rem

px: px在前面已經(jīng)講了， 就是一個(gè)固定單位。

em: em作為font-size的單位時(shí)，其代表父元素的字體大小，em作為其他屬性單位時(shí)，代表自身字體大小。

rem: rem作用于非根元素時(shí)，相對(duì)于根元素字體大小；rem作用于根元素字體大小時(shí)，相對(duì)于其出初始字體大小。

/* 作用于根元素，相對(duì)于原始大小（16px），所以html的font-size為32px*/
html {font-size: 2rem}

/* 作用于非根元素，相對(duì)于根元素字體大小，所以為64px */
p {font-size: 2rem}

flexible rem布局原理
flexible rem布局原理即是把設(shè)計(jì)稿等比寬的切成100份， 假設(shè)每份的單位是x， 那么我們?cè)诓季值臅r(shí)候就可以以x為單位， 將設(shè)計(jì)稿等比例的放大縮小到對(duì)應(yīng)的屏幕了，這樣就不用為各個(gè)屏幕做適配。

然而像上面所說(shuō)的x是不存在的， 不過(guò)好在我們有rem， 只要我們將rem設(shè)置成1x，那么開(kāi)發(fā)過(guò)程中，不就達(dá)到我們的目的了嗎？

如何將rem設(shè)成1x呢？ 回想一下， 我們是不是能取得viewport的寬度（document.documentElement.clientWidth），我們能取得設(shè)備像素比（window.devicePixelRatio）, 我們能夠設(shè)置html的樣式（html.style.fontSize = "..."）， 所以簡(jiǎn)單的實(shí)現(xiàn)方案就有了

document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + "px";

當(dāng)然，flexible并不這么簡(jiǎn)單，它還對(duì)于不同dpr做了處理， 它幫你處理了2倍屏、3倍屏等情況，通過(guò)設(shè)置viewport的縮放比，這也就是上面所說(shuō)的0.5px處理方案之一， 具體的這里不再贅述， 有興趣的同學(xué)可以看看原文。

最后，移動(dòng)端 iOS 8 以上以及 Android 4.4 以上已經(jīng)有了vwvh單位， 1vw1vh相當(dāng)于viewport的百分之一寬/高，也就是我們上面所說(shuō)的x單位， 如果你的手機(jī)支持該api， 也可以使用該單位方案。

依稀記得， 某次使用了rem處理活動(dòng)頁(yè)的時(shí)候， 被設(shè)計(jì)大佬駁回了。
大佬認(rèn)為， 當(dāng)用戶使用更大的屏幕的時(shí)候， 他應(yīng)該能看到更多的內(nèi)容， 而且設(shè)計(jì)稿被放大或者縮小的話， 會(huì)失去他原來(lái)的感覺(jué)。
所以， 對(duì)于rem方案其實(shí)可能已經(jīng)不太適合當(dāng)前的情況了， 畢竟使用媒體查詢和px以及em就能解決各種響應(yīng)式問(wèn)題， 雖然效率會(huì)比較低下， 而關(guān)于這個(gè)， 也恰好看到了有人在知乎上提了這么個(gè)問(wèn)題， 有興趣的可以前去圍觀。

為什么很多web項(xiàng)目還是使用 px，而不是 rem？

本文多是概念上的，也參考了許多文章，要真正理解還需要多參考實(shí)際項(xiàng)目。

移動(dòng)前端開(kāi)發(fā)之viewport的深入理解
A tale of two viewports — part one
A tale of two viewports — part two
Meta viewport
7 種方法解決移動(dòng)端 Retina 屏幕 1px 邊框問(wèn)題
再談Retina下1px的解決方案
vh,vw單位你知道多少？
Rem布局的原理解析