一、rem適配方案
準(zhǔn)備工具，
viewport： 手機(jī)瀏覽器是把頁(yè)面放在一個(gè)虛擬的"窗口"（viewport）中，通常這個(gè)虛擬的"窗口"（viewport）比屏幕寬，這樣就不用把每個(gè)網(wǎng)頁(yè)擠到很小的窗口中（這樣會(huì)破壞沒(méi)有針對(duì)手機(jī)瀏覽器優(yōu)化的網(wǎng)頁(yè)的布局），用戶可以通過(guò)平移和縮放來(lái)看網(wǎng)頁(yè)的不同部分。
在項(xiàng)目index.html的head引入：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
vue-cli: 用這個(gè)主要是用webpack,這個(gè)構(gòu)建工具大大降低了webpack的使用難度;快速構(gòu)建出一個(gè)前端項(xiàng)目。
postcss: 官網(wǎng)解釋：PostCSS is a tool for transforming styles with JS plugins，就是postcss用js插件幫你轉(zhuǎn)換css樣式的一個(gè)工具。比如，這里的把你的文件里面16px替換成1rem(根大小默認(rèn)16px的情況）；這樣你就不用自己去算了！
postcss-pxtorem: postcss的一個(gè)插件，主要是幫你把px轉(zhuǎn)換成對(duì)應(yīng)的rem；
然后：還要用js代碼去動(dòng)態(tài)算根目錄應(yīng)該有的字體大小，反正就是一段js代碼去動(dòng)態(tài)獲取屏幕寬度！
第一步，先用vue-cli快速構(gòu)建出一個(gè)項(xiàng)目，然后，安裝postcss，postcss-pxtorem，postcss-loader，postcss-import，postcss-url；
第二步，在項(xiàng)目根目錄下添加.postcssrc.js文件，在里面寫上：
module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 32, propList: ['*'], minPixelValue: 2 } }};
第三步，動(dòng)態(tài)設(shè)置根字體大小！在head里面插入一段簡(jiǎn)單的js:
(function() {
function autoRootFontSize() {
document.documentElement.style.fontSize =
Math.min(screen.width,document.documentElement.getBoundingClientRect().width) / 750 * 32 + 'px';
// 取screen.width和document.documentElement.getBoundingClientRect().width的最小值；除以750，乘以32；懂的起撒，就是原本是750大小的32px;如果屏幕大小變成了375px,那么字體就是16px;也就是根字體fontSize大小和屏幕大小成正比變化！是不是很簡(jiǎn)單
}
window.addEventListener('resize', autoRootFontSize);
autoRootFontSize();
})();
第四部，在樣式里直接按照UI尺寸寫px即可：
二、vw適配方案
vw的方案就簡(jiǎn)單多了，因?yàn)関w本來(lái)就相對(duì)屏幕的百分比，所以我們不用再去動(dòng)態(tài)的改變根字體大小了，只需要把750上的px大小轉(zhuǎn)換成對(duì)應(yīng)的vw值就完了，這一步交給postcss工具就可以！
所以只需要兩步！
第一步，先用vue-cli快速構(gòu)建出一個(gè)項(xiàng)目，然后，安裝postcss，postcss-pxtorem，postcss-loader，postcss-import，postcss-url
第二步，在項(xiàng)目根目錄下添加.postcssrc.js文件，在里面寫上：
module.exports = { "plugins": { "postcss-import": {}, "postcss-url": {}, "postcss-aspect-ratio-mini": {}, "postcss-write-svg": { utf8: false }, "postcss-cssnext": {}, "postcss-px-to-viewport": { viewportWidth: 750, unitPrecision: 3, viewportUnit: 'vw', selectorBlackList: ['.ignore', '.hairlines'], minPixelValue: 1, mediaQuery: false }, "postcss-viewport-units": {}, }}
注：?jiǎn)?dòng)項(xiàng)目時(shí)如果報(bào)錯(cuò)，需要安裝一下：postcss-aspect-ratio-mini，postcss-write-svg，postcss-cssnext，postcss-px-to-viewport，postcss-viewport-units
viewportWidth是你設(shè)計(jì)稿的大小750，然后unitPrecision是vw值保留的小數(shù)點(diǎn)個(gè)數(shù)；
