项目结构如图
在App.vue文件配置
<template>
<div id="app">
<transition name="fade" mode="out-in">
<router-view />
</transition>
</div>
</template>
<script>
export default {
name: 'App',
components: {},
created() {
//designWidth:设计稿的实际宽度值,需要根据实际设置
//maxWidth:制作稿的最大宽度值,需要根据实际设置
//这段js的最后面有两个参数记得要设置,一个为设计稿实际宽度,一个为制作稿最大宽度,例如设计稿为750,最大宽度为750,则为(750,750)
(function(designWidth, maxWidth) {
var doc = document,
win = window,
docEl = doc.documentElement,
remStyle = document.createElement('style'),
tid
function refreshRem() {
var width = docEl.getBoundingClientRect().width
maxWidth = maxWidth || 540
width > maxWidth && (width = maxWidth)
var rem = (width * 100) / designWidth
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}'
}
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(remStyle)
} else {
var wrap = doc.createElement('div')
wrap.appendChild(remStyle)
doc.write(wrap.innerHTML)
wrap = null
}
//要等 wiewport 设置好后才能执行 refreshRem,不然 refreshRem 会执行2次;
refreshRem()
win.addEventListener(
'resize',
function() {
clearTimeout(tid) //防止执行两次
tid = setTimeout(refreshRem, 300)
},
false
)
win.addEventListener(
'pageshow',
function(e) {
if (e.persisted) {
// 浏览器后退的时候重新计算
clearTimeout(tid)
tid = setTimeout(refreshRem, 300)
}
},
false
)
if (doc.readyState === 'complete') {
doc.body.style.fontSize = '16px'
} else {
doc.addEventListener(
'DOMContentLoaded',
// eslint-disable-next-line no-unused-vars
function(e) {
doc.body.style.fontSize = '16px'
},
false
)
}
})(750, 750)
},
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
padding: 0;
margin: 0;
box-sizing: border-box;
}
</style>
根据个人习惯,我喜欢100px=1rem的换算。7.5rem为移动端屏幕宽度。