08-移動端開發教程-移動端適配方案

因爲移動端的特殊性，屏幕的尺寸碎片化嚴重，要想很好的適配不一樣的尺寸的設備，須要咱們前端開發相比PC端要作一些基層的適配方案。

1. 常見的適配方案

1. 百分比+固定高度佈局方案
   • 固定屏幕爲理想視口寬度
   • 少量的媒體查詢設置字體
   • 水平百分比佈局
   • 水平方向部分也可使用彈性佈局
2. Rem解決方案
   • Rem的大小取值：根據頁面的dpr動態改變
   • Rem的取值： 1rem = 100px 或者 1rem = 1/10 * 理想視口的寬度
   • chrome瀏覽器字體小於12px（會被重置爲12px)
3. 固定設計稿的寬度開發+根據設備動態適配縮放
   • 開發直接按照設計稿編寫固定尺寸元素
   • 頁面加載完成後用js動態根據dpr改變頁面的縮放值
   • 推薦使用： flexible方案

2. 百分比與固定高度佈局方案

此方案的前提是設置屏幕爲理想視口，而後經過水平百分比佈局或者彈性佈局，垂直方向通常用固定像素。

優勢：佈局快速簡單方便、在移動設備中水平表現良好差別不大。
缺點：因爲垂直方向像素恆定，可能水平很寬的屏幕會被拉伸變形嚴重，另外在高倍屏幕上1像素可能被多倍的物理像素顯示，會變的很是粗。

2.1 橫向百分比 + 縱向高度固定

首先看案例： 拉勾網移動端首頁頂部的logo區域，無論如何變化瀏覽器的寬度，高度不變化，寬度自適應。

 

參考代碼：

htm設置meta標籤
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <style> #header { /* 寬度默認不設置，就是100% */ height: 45px; line-height: 45px; background-color: #00b38a; color: #fff; font-size: 1.8rem; /* 也能夠根據媒體查詢適當調整字體大小 */ text-align: center; position: relative; } </style> <div id="header"> </div> 

2.2 彈性盒子+高度固定佈局

logo下面一行的左右兩個盒子，高度不變，寬度雖然有變化，可是左右兩個盒子都基本上靠在兩側，能夠用浮動實現，也能夠用彈性盒子實現。

 

參考代碼：

<style> .container { height: 40px; display: flex; justify-content: space-between; line-height: 40px; } </style> <div class="container"> <span class="info">10秒鐘定製職位</span> <a href="#" class="go">去登錄</a> </div> 

某些場景下也須要固定像素的佈局，好比：頭像通常會用固定的寬高進行排版。

3. rem佈局方式

rem是css3中新增長的長度單位，以前咱們接觸過em單位，em表示1em表明1個字體的寬度。而rem是根元素字體的大小，在網頁中也就是設置的html根元素的字體大小。

html { font-size: 16px; } /* html根元素的字體大小是16px， * 那麼 1rem = 1* 16px = 16px * 2rem = 2 * 16px = 32px */ 

好比，以下需求：隨着設備尺寸的變寬，元素高度和寬度都相應放大,好比下圖中彈出的拉鉤下載的app連接的層。

 

隨着設備尺寸的變寬，元素高度和寬度都相應放大

能夠經過設置元素的寬高直接用rem單位，而後根據不一樣的屏幕的寬度設置不一樣的html字體的大小，來實現自動適配不一樣屏幕的目的。

3.1 媒體查詢改變根元素的字體大小

CSS3新增長了媒體查詢功能，也就是能夠根據設備媒體的屬性作相關的判斷，而後執行不一樣的CSS規則。 媒體查詢細節參考。

/* 媒體查詢以@media開頭，而後後面能夠跟上 判斷的條件，好比：screen表示屏幕設備, and是而且的意思， min-width是最小寬度的意思。 */ @media screen and (min-width: 320px) { html {font-size: 50px;} } @media screen and (min-width: 360px) { html {font-size: 56.25px;} } @media screen and (min-width: 400px) { html {font-size: 62.5px;} } @media screen and (min-width: 440px) { html {font-size: 68.75px;} } @media screen and (min-width: 480px) { html {font-size: 75px;} } @media screen and (min-width: 640px) { html {font-size: 100px;} } 

以上參考代碼的意思是： 根據CSS的媒體查詢設備的屏幕的寬度，根據寬度的大小設置密集的html根元素的字體大小。

因爲rem根據不一樣枚舉的屏幕尺寸設置了不一樣的大小值，因此根據rem佈局的元素會根據屏幕自動適配。

缺點：媒體查詢不能徹底枚舉，畢竟android的屏幕尺寸碎片化嚴重，各類尺寸都有，不能徹底覆蓋，只能大致覆蓋。若是想要精確覆蓋要麼經過js實現，要麼用最新的瀏覽器已經支持的calc實現。

以上假設設計圖是640像素。而後在640像素的設備上，1rem = 100px方便計算盒子的尺寸，能夠直接口算。

3.2 js實現動態改變根元素的字體大小

經過js動態獲取屏幕的寬度（document.clientWidth）而後根據屏幕寬度動態計算出rem的實際值。

假設，640px的設備 1rem = 100px
公式： rem = document.clientWidth / 640 * 100px;

!(function(doc, win) { var docEle = doc.documentElement, evt = "onorientationchange" in window ? "orientationchange" : "resize", fn = function() { var width = docEle.clientWidth; width && (docEle.style.fontSize = 100 * (width / 640) + "px"); }; win.addEventListener(evt, fn, false); doc.addEventListener("DOMContentLoaded", fn, false); }(document, window)); 

4. 組合佈局方式

其實以上講的兩種方式，通常都會混用，並非用一種方案寫到頭，而是什麼狀況下適合就用什麼方式。

好比：

1. 頭像在不一樣設備上通常都會設置固定像素的大小
2. 寬度可能超過50%的盒子儘可能用百分比或者彈性盒子佈局
3. 高度和寬度須要同時根據屏幕自動縮放的時候，推薦使用rem佈局

5. 縮放自適應佈局方式（推薦***）

簡單點說就是，開發的時候根據設計搞徹底還原像素，而後根據屏幕的寬度經過js動態改變頁面的縮放，剛好是理想視口的大小。

原理核心就是修改頁面mate標籤的縮放。

這樣優勢很是多，首先開發人員直接像素還原，開發效率很高，也沒有移動端1像素的問題。也是老馬推薦你們使用的方式。

固然縮放佈局方式也能夠跟rem等方式結合，好比淘寶的flexible方案就是利用頁面的縮放和rem模擬vw的方案，使用起來很是簡單，稍微有點不爽的就是要像素和rem之間要進行轉換。

原理圖：

 

具體代碼案例參考：https://github.com/amfe/article/issues/17

另外推薦：基於 flexible方案的 hotcss

6. 總結

目前因爲瀏覽器兼容等問題，還有很不錯的將來方案，好比：vw 佈局方案等。就目前工程實踐來看，仍是淘寶的flexible方案最靠譜，應用也最普遍。老馬強烈推薦。

---

---

聯繫老馬

對應視頻地址：https://qtxh.ke.qq.com/
老馬qq： 515154084
老馬微信：請掃碼