方法一：在 index.html 或者 main.js 中添加以下代碼：
const setFontSize= () => {
const htmlDom = document.getElementsByTagName('html')[0];
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
if (htmlWidth >= 750) {
htmlWidth = 750;
}
if (htmlWidth <= 320) {
htmlWidth = 320;
}
htmlDom.style.fontSize = `${htmlWidth / 7.5}px`
};
window.onresize = setFontSize;
setFontSize()
方法二：使用 lib-flexible 和 px2rem-loader 自動轉(zhuǎn)換
1、安裝插件
npm install lib-flexible --save
npm install px2rem-loader --save-dev
2、配置插件
①在入口文件 main.js 中引入 lib-flexible
import 'lib-flexible/flexible'
②在 build/utils.js 文件中配置 px2rem-loader
exports.cssLoaders = function (options) {
options = options || {}
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
安裝并配置好 lib-flexible 和 px2rem 之后要重啟一下項目，才能自動把 px 轉(zhuǎn)換成 rem胀瞪。
