Rem實現移動端適配

標籤：數值   跨平台   fonts   cti   根據   func   idt   event   inline   

移動端適配

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

Rem實現移動端適配