移動端適配基礎(rem,vw,vh

前言

主要介紹幾個移動端經常使用的單位rem、vw、vh，配合傳統的px、百分比、<viewport>標籤，兼容適配移動端的各類分辨率的手機端。

單位簡介

rem：

顧名思義，root emphasize，根元素的font-size，

vw

屏幕寬度相關，1vw是屏幕寬度的1%

vh

屏幕高度相關，1vh是屏幕高度的1%

其它：vmin，vmax 分別表示二者中較小和較大的部分。

適配

如下假定已經存在一個使用px單位，且徹底適配320xp寬度手機的頁面。

1.改變viewport的initial-scale的數值，

好比適配的目標的寬度爲400px

initial-scale=1.25 // 400/320=1.25

但這裏有個缺點，就是得提早知道所適配的設備的尺寸,而後服務端根據userAgent來判斷。

<% if(device === 1){ %>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=2.0,user-scalable=no" />
    <% } %>

    <% if(device === 2){ %>
        <meta name="viewport" content="width=device-width,initial-scale=1.5,maximum-scale=2.0,user-scalable=no" />
    <% } %>

或者使用js計算縮放比例 ,而後替換initial-scale的值

var scale =  screen.width/320,
      viewport =  document.querySelector('meta[name=viewport]');
      
  viewport.setAttribute('content',
       viewport.getAttribute('content')
               .replace(/(initial-scale)=[\d\.]?\d/,'$1='+scale))

但使用js會有滯後性，頁面會多渲染一次，且會致使頁面閃爍

首屏渲染 -> js改變initial-scale -> 二次渲染，頁面放大(閃爍)

2.替換px轉而使用rem

設定父盒子的css爲

父盒子{
  width:320px
}

設置根元素的font-size爲屏幕的某個比例

html {
  font-size:16px;
}

那麼父盒子的css爲

父盒子{
  width:20rem;//換算爲320px，充滿屏幕寬度
  height:10rem;//換算爲160px，盒子比例達到1:1
}

可是css的替換以及rem的計算仍是比較繁瑣的，這裏建議使用sass的函數
而後使用正則替換

(/(\d+[\.\d+]?px)/g,'rem($1)')

$baiscRem:320px / 20 //這裏假定爲頁面作20個等分


@function rem($px)
 @return ($px / $basicRem) * 1rem

父盒子
  width:rem(320px)

圍觀羣衆1：爲何不在寫css時候直接使用rem呢？
答：每次都調尺寸都要用計算器算一下啊，好麻煩。(╯°口°)╯(┴—┴

圍觀羣衆2:爲何不直接寫 rem(320px) ？
答：寫括號也好麻煩。 (:3」∠)

而後，使用css @media查詢，肯定rem的值。
這裏就比較具體了，須要根據實際的業務需求來決定所要適配的設備尺寸

/* media.css */
@media screen and (min-width:320px) and (max-width:320px){
    html{
      font-size:320 / 320 * $basicRem;
    }
}
@media screen and (min-width:400px) and (max-width:400px){
    html{
      font-size: 400 / 320 * $basicRem;
    }
}

tips：若是不知道要兼容什麼樣的設備。能夠再用戶訪問後，javascript收集該設備的相關信息，
而後在服務端自動更新該文件的內容，加入新的@media規則。

可是所有使用rem，有個缺點很蛋疼，
就是除法致使的小數缺省的問題，致使視覺上會有幾個像素的誤差。

例如：多列布局會引發幾個像素的空白等 （￣へ￣）

關於vw，vh

寬高的1%，建議使用在各類佈局的容器上，如上圖的父盒子和子盒子。

父盒子{
   box-sizing:border-box;
   padding:10vw;
   width:100vw;  
   height:50vw;  /* 妥妥的2:1比例 */
   letter-spacing: -4px; /*消除行內元素的4px的空白間隔 */
}
子盒子1,子盒子2{
  magin:0 5vw;
  width:30vw;
  height:30vw;  /* 妥妥的1:1的比例 */
  display:inline-block;
}

相比rem，使用vw和wh是很是直觀的，讓其餘人看到就能知道，該界面是以怎麼樣的結構進行佈局，利於維護。

但在具體深刻到表現的地方，建議轉而使用rem來配合。

注意：vw在一些三星的機子會有兼容問題，致使失效。

若是有兼容問題,vw在容器上的應用能夠百分比替換 --> codepen-使用百分比實現的等比例容器

總結

其中涉及的單位和元素較多，其實若是僅僅爲了達成相同的頁面效果，它們之間均可以相互替代。甚至使用最原始的px，配合js的計算，也可以作到相同的事情。

這是一個探索的過程，每一個人喜愛不一致，採用的方式也不盡相同。基於瀏覽器提供了豐富的方法，針對具體問題，具體分析，不停地嘗試，最終找到最合適的方案。