Vue專案螢幕自適應
阿新 • • 發佈:2020-11-20
一、安裝lib-flexible
npm i lib-flexible -D
二、在main.js中引入
import 'lib-flexible/flexible'
三、在index.html檔案中設定meta標籤:
<meta name='viewport' content='width=device-width , initial-scale=1.0'>
四、然後在專案中寫css時會自動將rem轉化為px,需要安裝px2rem這個工具
npm i px2rem-loader -D
四、修改配置檔案
4.1有build資料夾
/build/util.js:
a、在cssLoader物件下面新增一個px2remLoader物件:
const px2remLoader = {
loader : 'px2rem-loader',
options : {
//這個引數是通過psd設計稿的 寬度 / 10 來計算,這裡以750為標準
remUnit : 75
}
}
b、然後將utils.js檔案中的generateLoaders函式的loaders常量改為[cssLoader, px2remLoader]
const loaders = [cssLoader, px2remLoader]
4.2 無build資料夾(使用了vue cli3或3以上版本)
在專案根目錄下新建vue.config.js檔案
const cssLoader = { loader: 'css-loader', options: { minimize: process.env.NODE_ENV === 'production', sourceMap: options.sourceMap } } // 新增px2remLoader const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 75 } } function generateLoaders (loader, loaderOptions) { // 新增px2remLoader const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader] if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) } }