基於vue-cli配置移動端自適應

目前移動端應該大都是用rem來作自適應佈局，下面是關於如何基於vue-cli配置的項目作移動端屏幕適配。

1.安裝lib-flexible

在命令行中輸入並運行：npm i lib-flexible --save

 

2.在項目入口文件main.js中引入lib-flexible

import 'lib-flexible'

 

這個時候咱們能夠npm run dev看一下，已經有了效果。

 

可是這不是咱們最終想要的，到這一步意味着咱們仍是須要根據UI效果圖將px轉成rem，這樣的計算實在是太繁瑣，以前本人的作法是經過sass寫一個方法將px轉rem，這樣一來我須要將每個頁面、組件都引入這個sass文件或者每個頁面、組件都加上這一個方法，問題是解決了可是不夠優雅，好在網上的大神不少。在github上看到了https://github.com/songsiqi/px2rem-postcss

3.安裝postcss-loader、postcss-px2rem

在命令行中輸入並運行：npm install postcss-loader postcss-px2rem --save

 

注：我用的是cnpm是由於安裝了淘寶鏡像，沒有安裝淘寶鏡像就是npm

4.修改項目build文件夾下的vue-loader.conf.js文件

在module.exports中加入postcss:[require('postcss-px2rem')({'remUnit':75,'baseDpr':2})]

 

由於是以750px的UI設計圖爲標準，因此remUnit的值爲75。

修改了vue-loader.conf.js文件咱們須要在終端從新輸入並運行npm run dev

最終如圖結果：

 

原文：https://blog.csdn.net/ly272864318/article/details/80100367