這篇文章，主要是總結一下，我在移動端佈局用過的方法。有三種，一種是響應式佈局，利用@meida判斷各個size；第二種是REM；最後是設定viewport中的width。
響應式佈局
這種感覺是最好理解了，利用@media進行斷點，在每個斷點中編寫css。
|
1 2 3 |
@media (max-width:768px){ //css } |
上面這段程式碼，在瀏覽器的寬度低於768時有效。同理，如果把max換成min，就會變成高於768時有效。可以設定寬度，也可以設定高度，也可以同時設定多個值。
在MDN,@media上，發現很多值都可以做判斷的。寬，高，寬高比，顏色（這個是指定輸出裝置每個畫素單位的位元值），是否橫屏或豎屏，還有很多，可以去MDN看看。
媒體型別
@meida還可以根據媒體型別進行斷點。
- all，所有裝置
- print，列印
- screen，彩色的電腦螢幕
- speech，不知道什麼來的。
關鍵字
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@media (max-width:1000px){ div{background:blue;} } @media (min-width:1000px) and (max-width:1150px){ div{background: yellow;} } @media only screen and (max-width:1150px){ div{border:solid 1px;} } @media not print and (max-width:1150px){ div{border-radius:50%;} } |
- and，就是‘和’的意思，前後兩個條件都達到時
- only，唯一
- not，除了這個之外
上面4個@media，分別的效果是：
- 當瀏覽器寬度低於1000px時
- 當瀏覽器寬度大於1000px 和 小於1150px時
- 當在螢幕上顯示 和 寬度小於1150px時
- 除了在列印上顯示外 和 寬度小於1150px時
按需‘載入’css
@media還可以用在link標籤上。
|
1 2 3 |
<code> <link rel="stylesheet" href="css/1.css" media="(max-width:500px)"/> </code> |
當瀏覽器寬度低於500px時，1.css的樣式才會有效果。但這不代表大於500px時，就沒載入了1.css。使用了@media屬性後，只會讓你當條件符合了，才讓對應的css檔案有效果。而且用這種方式有一個好處，就是不用在css裡寫@media。
平常響應式網站的開發
平時響應式網站的開發，我都會先對比PC和MOBILE的設計稿，看看有什麼區別，然後才進行編寫css。通常都是使用flex。寬度儘量用百分比，間距、高度、字型大小使用 em，就可以很方便的進行大小的控制。
REM
REM這個單位，會根據html的font-size大小進行轉換。
|
1 2 |
html{font-size:100px;} p{padding-top:.5rem;} |
.5rem = 50px / 100
轉換後p的padding-top就是50px了。只要我們進行適當的計算，當前螢幕的寬度，html的font-size是多少px就OK了。
如何計算當前html的font-size值
比如，我們拿到的設計稿是750px，那就設定成當螢幕寬度是750的時候，html的font-size就是100px（當然這個100px你可以隨意設定的，我設定成100px只是方便我計算），然後就根據當前螢幕的寬度 / 750 * 100，就得到了當前螢幕寬度的font-size值。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//當前螢幕寬度 / 750 = 當前螢幕寬度的font-size / 100 //程式碼如下 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); |
上面這段程式碼，是直接根據螢幕寬度進行計算font-size的。而淘寶移動端REM方案，還根據你的dpr去計算，而且會進行整體的縮放。淘寶的這種方案，比上面的程式碼會好很多。
大家注意邊框的大小。第二張圖的邊框是比第一張圖的小的，兩個都是border:solid 1px。其他的邊距都是一樣。淘寶的方案，解決了另一個問題：邊框1px的問題。
大家可以開啟以下連結，看看具體的效果：
淘寶移動端REM
這個很簡單，只需要載入js就好了
|
1 2 3 |
<code> <script src="http://g.tbcdn.cn/mtb/lib-flexible/%7B%7Bversion%7D%7D/??flexible_css.js,flexible.js"/> </code> |
然後在css中，將px轉為rem就好了。我是用scss的，所以寫個函式就好了。
|
1 2 3 4 5 6 |
@function s($px) { <a href="http://www.jobbole.com/members/wx1409399284">@return</a> ($px / 75) * 1rem; } p{ font-size:s(40);padding-left: s(52); } |
比如p的font-size在750的設計稿是40px，然後s(40)就OK了。
設定viewport中的width
這種方案，就是定死viewport中的width大小。
比如設計稿是750的，然後就在程式碼上寫：
|
1 2 3 |
<code> <met name="viewport" content="width=750"/> </code> |
我們用同樣的頁面，看看效果是怎麼樣
連結：第三種方案
效果和第二種是一樣的，在手機上看也是。
|
1 2 3 4 5 6 7 8 9 |
.top{ display: flex;align-items:center;padding:50px 0 113.5px;justify-content:space-between;width:100%; p{ font-size:40px;padding-left:52px; } img{ width:71.5px;height: 71.5px;display: block;margin-right: 63.5px; } } |
而程式碼是直接使用px的，定死的。
感覺從效果上來看，是很完美的，但是為什麼不是這種方法最流行？
|
1 2 3 4 5 6 7 8 9 10 11 |
@media screen and (max-width:360px){ .box{color:red;} } @media screen and (max-width:520px){ .box{color:black;} } @media screen and (max-width:750px){ .box{color:yellow;} } |
我在iphone7，小米5s，谷歌瀏覽器模擬的iphone6plus上，字型顏色都是黃色的。所以@media媒體查詢是無法使用的，因為已經將寬度定死了。而REM方案卻可以使用媒體查詢的。因為移動端有很多奇怪的大小，而且在不同的瀏覽器或者微信上，高度都是不同的，所以可能會造成間距有很大的問題。
|
1 |
window.screen.width |
用js，可以獲取當前裝置的寬度。
對比三種方式
響應式的優缺點
優點：相容性好，@media在ie9以上是支援的，PC和MOBILE是同一套程式碼的，不用分開。
缺點：要寫得css相對另外兩個多很多，而且各個斷點都要做好。css樣式會稍微大點，更麻煩。
REM優缺點
優點：能維持能整體的佈局效果，移動端相容性好，不用寫多個css程式碼，而且還可以利用@media進行優化。
缺點：開頭要引入一段js程式碼，單位都要改成rem(font-size可以用px)，計算rem比較麻煩(可以引用前處理器，但是增加了編譯過程，相對麻煩了點)。pc和mobile要分開。
設定viewport中的width
優點：和REM相同，而且不用寫rem，直接使用px，更加快捷。
缺點：效果可能沒rem的好，圖片可能會相對模糊，而且無法使用@media進行斷點，不同size的手機上顯示，高度間距可能會相差很大。
總結
還是看專案需求，再決定使用哪種方案，如果就手機站的話，我使用REM比較多。如果對距離比較精確的話，大量css3動畫的，就使用第三種。