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

阿新 • • 發佈：2022-04-28

由於移動端的特殊性，螢幕的尺寸碎片化嚴重，要想很好的適配不同的尺寸的裝置，需要我們前端開發相比PC端要做一些基層的適配方案。

1. 常見的適配方案

百分比+固定高度佈局方案
- 固定螢幕為理想視口寬度
- 少許的媒體查詢設定字型
- 水平百分比佈局
- 水平方向部分也可以使用彈性佈局
Rem解決方案
- Rem的大小取值：根據頁面的dpr動態改變
- Rem的取值： 1rem = 100px 或者 1rem = 1/10 * 理想視口的寬度
- chrome瀏覽器字型小於12px（會被重置為12px)
固定設計稿的寬度開發+根據裝置動態適配縮放
- 開發直接按照設計稿編寫固定尺寸元素
- 頁面載入完成後用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));