rem佈局 1. 技術選型 方案：採取單獨製作移動頁面方案 技術：佈局採取rem適配佈局（less rem+媒體查詢） 設計圖紙：750px尺寸 2. 相關文件夾結構 3. 設置視口標簽以及引入初始化央視 ~~~html ~~~ 4. 設置公共的common.less文件 設置好最常見的屏幕尺寸，利 ...
rem佈局
技術選型
方案：採取單獨製作移動頁面方案
技術：佈局採取rem適配佈局（less-rem+媒體查詢）
設計圖紙：750px尺寸
相關文件夾結構
設置視口標簽以及引入初始化央視
<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">設置公共的common.less文件
- 設置好最常見的屏幕尺寸，利用媒體查詢設置不同的html字體大小，因為除了首頁其他頁面也需要
- 常用尺寸：320px\360px\375px\384px\400px\414px\424px\480px\540px\720px\750px
- 劃分的分數我們定位15等分
- html字體大小為50px，寫在最上面
方案1
- less
- 媒體查詢
- rem
方案2
- flexible.js
- 手機淘寶團隊出的簡潔高效的移動端適配庫
- 不在需要些不同屏幕的媒體查詢
- 原理是把當前設備劃分為10等分，但是不同設備下，比例還是一致的
- 我們要做的，就是確定好我們當前設備的html文字大小就可以了
- 比如當前設計稿是750px，那麼我們只需要把html文字大小設置為75px（750px / 10）就可以了
- 裡面頁面元素rem值：頁面元素的px值/75
- 剩下的flexible.js去算
- github地址：http://github.com/amfe/lib-flexible
- rem
- flexible.js
