一套設計稿如何適配不同移動端設備？
開發(fā) WebApp 時叶眉，我們通常只會從設計師那邊拿到一個尺寸的項目設計圖家卖，比如是按照 iphone 6 為基礎設計的，因此前端需要讓這一套設計稿能夠通用在不同的設備型號中锁右，本文介紹的方式是采用 hotcss.js 插件。
hotcss.js會自動根據(jù)手機型號計算dpr的值讶泰，同時在html根標簽內(nèi)植入一個相應的font-size的值咏瑟。
hotcss.js 優(yōu)點
- 保證不同設備下的統(tǒng)一視覺體驗。
- 不需要你再手動設置 viewport痪署，根據(jù)當前環(huán)境計算出最適合的 viewport码泞。
- 支持任意尺寸的設計圖，不局限于特定尺寸的設計圖狼犯。
- 支持單一項目余寥，多種設計圖尺寸，專為解決大型悯森，長周期項目劈狐。
- 提供
px2rem轉(zhuǎn)換方法，CSS 布局呐馆，零成本轉(zhuǎn)換，原始值不丟失莲兢。 - 有效解決移動端真實 1 像素問題汹来。
px2rem 原理
在 vue-loader 中使用 px2rem 插件，首先安裝 px2rem-loader：
npm install px2rem-loader --save-dev
根據(jù)設計稿所采用的手機型號（如iPhone 6 或 iPhone X）改艇，那么寬度則為 640px 或 750px 收班，因此先在 chrome 調(diào)試工具中獲取移動端的 <html> 根元素的 font-size 的值，然后在配置 vue-loader 時將其設為 remUnit 參數(shù)的值:
loaders: {
css: 'vue-style-loader!css-loader!px2rem-loader?remUnit=40&remPrecision=8',
scss: 'vue-style-loader!css-loader!px2rem-loader?remUnit=40&remPrecision=8!sass-loader'
}
這樣就可以根據(jù)設計稿尺寸谒兄，在開發(fā)時寫 CSS 像素的絕對值摔桦，即 px 單位，px2rem 會自動將尺寸轉(zhuǎn)換成相應的 rem 單位承疲，結(jié)合不同終端生成的不同 html 根元素的字體大小邻耕，從而實現(xiàn)一套設計稿在不同設備完美兼容的效果。
Tips
對于一些布局類的樣式寬度燕鸽，通常采用百分比為單位兄世，如
width: 100%;又如配合box-sizing: border-box;設置width: 25%;可控制一行放4個div容器。對于一些小組件啊研，如按鈕御滩、文字等鸥拧，直接寫設計稿上的 css 尺寸即可。如
font-size,margin,padding,height…… 即使通過 PC 或 Pad 訪問也不會丟失效果削解。響應式開發(fā)中富弦，一般需要指定一個
min-width，這樣頁面尺寸縮小后氛驮，避免如按鈕里面的文字不會因為外層容器寬度減小而換行腕柜。
項目應用
我將之前做的一個項目目錄結(jié)構(gòu)和 Webpack 配置文件提取出來，生成一個簡易的 WebApp 腳手架柳爽，用于實現(xiàn)本文所述的自適應方案媳握。
Github項目地址：基于Vue的WebApp項目構(gòu)建模板
