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