rem佈局

rem佈局

1. 技術選型

   方案：採起單獨製做移動頁面方案

   技術：佈局採起rem適配佈局（less-rem+媒體查詢）

   設計圖紙：750px尺寸

2. 相關文件夾結構

3. 設置視口標籤以及引入初始化央視

   <meta name="viewport" content="width=device-width, initial-scale=1.0,
       user-scalable=no,maximun-scale=1.0,minimum-scale=1.0">
       <meta http-equiv="X-UA-Compatible" content="ie=edge">
       <link rel="stylesheet" href="css/normalize.css">

4. 設置公共的common.less文件

   • 設置好最多見的屏幕尺寸，利用媒體查詢設置不一樣的html字體大小，由於除了首頁其餘頁面也須要
   • 經常使用尺寸：320px\360px\375px\384px\400px\414px\424px\480px\540px\720px\750px
   • 劃分的分數咱們定位15等分
   • html字體大小爲50px，寫在最上面

5. 方案1

   • less
   • 媒體查詢
   • rem

6. 方案2

   • flexible.js
     • 手機淘寶團隊出的簡潔高效的移動端適配庫
     • 不在須要些不一樣屏幕的媒體查詢
     • 原理是把當前設備劃分爲10等分，可是不一樣設備下，比例仍是一致的
     • 咱們要作的，就是肯定好咱們當前設備的html文字大小就能夠了
     • 好比當前設計稿是750px，那麼咱們只須要把html文字大小設置爲75px（750px / 10）就能夠了
     • 裏面頁面元素rem值：頁面元素的px值/75
     • 剩下的flexible.js去算
     • github地址：http://github.com/amfe/lib-flexible
   • rem