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);
   }