移動端適配

關於移動端適配有不少的解決方案好比有rem佈局，媒介查詢rem佈局，vw佈局，flexible佈局

關於rem佈局這裏就不介紹了，這裏介紹一下比較推薦的vw佈局和flexible佈局

1.vw佈局

vw佈局在以前可能有一些瀏覽器不支持，可是如今基本的瀏覽器都支持，

1vw = 當前屏幕邏輯像素寬度的1%

在640的設計稿上

1vw = 3.2px

100px = 31.25vw

在750的設計稿上

1vw = 3.75px

100px = 26.6666666vw

因此使用vw佈局建議使用640的設計稿

固然有一些ui對640的設計稿沒有概念，那就用第二種適配方案flexible

2.flexible

在網上你可能見到最多的flexible 就是lib-flexible,其實早就出了最新版本叫amfe-flexible,他倆之間區別就是

舊版本他手動設置了dpr，新版本沒有，還有一個最關鍵的就是適配組件庫，對於組件庫的適配，lib-flexible就是由於設置了dpr，在android還好，由於它將全部的android的手機都設置爲了dpr爲1，而且沒有對手機進行縮放，在iPhone手機上因爲他設置了dpr，而且對屏幕進行了縮放，因此組件就會變得很小，而amfe-flexible沒有對屏幕進行縮放，因此使用組件庫就會很方便

使用方法

amfe-flexible 加 postcss-pxtorem

npm install amfe-flexible --save
npm install postcss-pxtorem --save

postcss-pxtorem就是將px轉化爲rem

babel.config.js

module.exports = {
     plugins:{
          'autoprefixer':{
                browsers:['Android >= 4.0','iOS >= 7']
          },
          'postcss-pxtorem':{
                rootValue:37.5,
                propList:['*']
           }
}

全局引入amfe-flexible,以後還需呀設置viewport

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

這樣不只可使用組件庫，並且還可使用750的設計稿，固然這種方法多少均可以只用，只要配置好rootValue就能夠了

在這裏postcss-pxtorem還解決了1像素線的問題，若是想寫1像素，寫成1PX就不被解析，他就是真正意義上的1px