一、直接引入rem.js
1，在src文件下面定义remConfig.js 文件
export default function() {
var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 750) {
deviceWidth = 7.5 * 50;
}
document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
// 禁止双击放大
document.documentElement.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, false);
var lastTouchEnd = 0;
document.documentElement.addEventListener('touchend', function (event) {
var now = Date.now();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
}, false);
}
2，在main.js 文件中引入remConfig.js 文件
import Vue from 'vue'
import App from './App'
import router from './router'
import './config/remConfig.js'
new Vue({
el: '#app',
router,
render: c => c(App)
})
3，定义index.css 文件
body {
font-size: 0.32rem;
}
4，在main.js 文件中引入 index.css 文件
import './common/index.css'
二、借助px2rem 插件
-
安装npm install px2rem-loader lib-flexible --save
-
在main.js 文件中引入import 'lib-flexible/flexible.js'
-
在build下的 utils.js中，找到generateLoaders 方法，在这里添加
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 37.5
}
}
function generateLoaders (loader, loaderOptions) {
const loaders = [cssLoader, px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
4，重启项目 ，会发现自己设置的px被转为rem 了
npm run dev
