Rem實現移動端適配

移動端適配

• web頁面跑在手機端（h5頁面）
• 跨平台
• 基於webview（）
• 基於webkit

常見適配方法

• pc端采用display：inline-block，讓div盒子橫着排

• 移動web：采用定高，寬度百分比，flex彈性布局，meDIA QUERY 媒體查詢；

• 媒體查詢
  結合css，通過媒體類型（screen、print）和媒體參數（max-width）

       @media screen and (max-width: 320px){
            /* css在屏幕跨度<=320px時這段樣式生效 */
            .inner{
                float: left;
            }
        }
        @media screen and (min-width: 321px){
            .inner{//
            }
        }
  

以上實現了一個簡單的橫排和豎排的響應

• rem原理與簡介
  Rem就是一個字體單位，類似於px，
  區別：他會根據HTML根元素大小而定，同時也可以作為高度和寬度的單位。
  適配原理：動態修改html的font-size適配；rem是通過不同屏幕的大小設置html根元素的font-size的屬性大小來實現適配。

    /* +_media實現*/
    @media screen and (max-width: 360px) and (min-width: 321px){
        html{
            font-size: 20px;
        }
    }
    @media screen and (max-width: 320px){
        html{
            font-size: 24px;
        }
    }
  

通過JS動態設置font-size：

//獲取視窗寬度
    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
        console.log(htmlWidth);
    let htmlDom = document.getElementsByTagName('html')[0];
        htmlDom.style.fontSize = htmlWidth/10 + 'px';

rem進階

• rem基准值計算

     1rem = 16px
  

• rem數值計算與構建

     170/16 = 170px
  

• rem與scss結合使用（node-sass安裝）
  也可以直接安裝sass（安裝教程http://www.cnblogs.com/yehui-mmd/p/8035170.html）

• rem適配實戰
  通過監聽瀏覽器視口來進行適配

    let htmlDom = document.getElementsByTagName('html')[0];
    window.addEventListener('resize', (e)=>{
        //獲取視窗寬度
        let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
        htmlDom.style.fontSize = htmlWidth/10 + 'px';
    })
  

  定義rem適配的函數及使用（sass語法）

  @function px2rem($px) {
      $rem:37.5px;//iphone6
      @return ($px / $rem) + rem;
  }
  .header{
      width:100%;
      height: px2rem(40px);
      background-color: red;
      padding-left: px2rem(23px);
   }