使用rem實現移動端適配的簡單方法

使用rem適配已經快一年了，感受仍是不錯的，在這裏記錄一下。 ##1.原理 rem是一個相對單位，相對的是根元素‘html’的字號。好比html的font-size:100px;那麼1rem=100px；html的font-size:120px;那麼1rem=120px；因此咱們能夠根據手機不一樣的尺寸，設置不一樣的根元素字體，來適應不一樣的屏幕。並且它兼容性好，從安卓2.1就支持rem。

舉個栗子：

//在iPhone5下
html{
    font-size:100px;
}

//在iPhone6下
html{
    font-size:116px;
}

.box{
    width:1rem;//在iPhone5下，width爲100px;在iPhone6下,width爲116px，從而實現了大小屏的適配
}

##2.設置基準 咱們依據什麼來設置根目錄的字號呢？兩種方案 ###2.1css媒體查詢寬度設置斷點 爲何是寬度？由於垂直方向的能夠出滾動條，而水平方向出現滾動條就有點怪怪的了。

@charset "utf-8";
//iphone5
@media screen and (max-width: 374px){
    html{
        font-size: 85px;
    }
}
//iphone6
@media screen and (min-width: 375px)and(max-width: 413px){
    html{
        font-size: 100px;
    }
}
//iphone6 p標準模式
@media screen and (min-width: 414px){
    html{
        font-size: 110px;
    }
}

###2.2js查詢計算寬高變化比 這種方案是查詢設備的寬高並計算出寬高的變化比（相對於你的基準尺寸），使用變化小的那個比值來設置根元素字號。

!function() {
   var count = 0;
   /*
      # 按照寬高比例設定html字體.
         - baseWidth和baseHeiht是設計稿尺寸
         - baseFontSize是720設計稿下html的fontsize
         - 按照當前屏幕寬高比跟設計稿寬高比較小的值做爲縮放比例
   */
   function setHtmlFontSize(callback) {
      var baseWidth = 720, baseHeiht = 1280, baseFontSize = 22.5, newSize = 22.5,sacle = 1;

       //若是此時屏幕寬度不許確，就嘗試再次獲取分辨率，只嘗試10次，不然使用innerWidth計算
      if(document.body.clientWidth !== window.innerWidth && count < 10) {
         document.body.style.display = "none";
         window.setTimeout(setHtmlFontSize, 0);
         count++;
      } 
      else {
          var sacle = Math.min(window.innerWidth / baseWidth, window.innerHeight / baseHeiht),
          newSize = parseInt( sacle * 10000 * baseFontSize ) / 10000;
          document.body.style.display = "none";
          setTimeout(function() {
            document.body.style.display = "";
            if(callback) {
              callback();
            }
            document.documentElement.style.fontSize = newSize + "px";
         }, 0);
      }
   }
   setHtmlFontSize();
}();

我目前採用的就是css方案，爲何放棄了js這種看起來更人性化的方案，是由於在測試的時候發現，有些低版本手機的某些瀏覽器下面會出現bug，它會先渲染一個沒有計算過頁面，而後再渲染成對的尺寸。反之css效率則很高。並且安卓尺寸千千萬萬，就不寵你，不寵你。實際上是它們坑死咱們~~

##3.小技巧 ###1.100px 我在寫代碼時並無用px轉rem插件，由於並不須要。技巧在於咱們以1rem=100px爲基準，這樣在寫代碼的時候，咱們只須要將px的值移動兩位小數就行了，這應該不用計算器把。。阿門 ###2.以小爲標準 這裏主要是指咱們在用css媒體查詢時，兩個端點之間的尺寸使用小屏幕的基準。好比位於iPhone6和iPhone5之間的尺寸，使用iPhone5的基準。由於小屏幕的東西放大屏幕確定空間是夠的，可是反之則不必定。由於有時候會寫一些笨笨的代碼。。。舉個例子： 笨的寫法就是按照寬度寫羅，分別指定三個元素的寬度羅。哈哈，我仍是比較喜歡flex。

##4.k e n g坑 以前帶給個人煩惱就是雪碧圖使用起來就不爽了，不過如今咱們把中小圖標所有使用圖標字體替換了，也就ok了。雪碧圖使用有哪些不爽呢？

• 圖片之間的留白要儘可能大一點，要否則就會露出旁邊的圖片
• 不一樣尺寸手機下會出現圖片位置稍稍的錯位，對於小圖標而言，就很是明顯了。 不使用雪碧圖也有一個坑：

.box{
    width:1rem;
    height:1rem;
    background-size:100% 100%;//對滴
    background-size:1rem 1rem;//不對滴
}

background-size請使用100%,100%,而不是1rem,1rem,這種，由於在瀏覽器渲染時，咱們的rem轉化成px以後，是會有不少小數位的，瀏覽器對width、height的精確度和background-size的精確度是不同的，非雪碧圖，咱們通常死不留白的，就會致使有一點點錯位。

##5.字號須要使用rem嗎 html的字號是用來佈局用的，這裏的字號是指整個頁面的文字字號，設置在body中，其餘元素繼承。

我是不同意在大屏手機下字號要變大的，會給人一種老人機的感受。並且其餘app還有網頁都是使用的正常字號，你恰恰要給加大幾個號，很差。

若是，若是，若是你硬是要加大，我教你一個簡單方法，你千萬別去一個個的改。使用sass中的變量，這樣你就只要在媒體查詢中修改一個變量的值，而不用每一個元素每一個元素去改了。後面我會寫一個文章介紹sass的這個用處，這裏不宜再發散了。我怕我止不住。

##6.結合em em：和rem同樣，它是一個相對單位，可是它相對的是自身字號。

爲何須要結合em呢？

之前咱們以640爲基準時是沒有必要使用這個單位，可是如今咱們是以750爲基準，咱們就須要這個單位了。看看下面的例子，你就明白了。

表單的label’單位電話‘，若是在750下，它爲1rem(這個值是隨便指定的)，它恰好能夠容納四個字，且兩邊有稍許留白。在咱們切到640的時候，它的寬度變小了，可是咱們的字號沒有變化，就會出現不夠容納四個字的狀況。所以咱們這裏使用em加rem定義：

.label-tel{
    width:4em;
    padding:0 0.05rem;
}