一、 在vue-cli中：
1. 在index.html中：
<script>
//监听自动刷新旋转屏幕改变
window.addEventListener('onorientationchange', setRem);
//监听自动刷新大小
window.addEventListener('resize', setRem);
setRem() // 调用
function setRem() {
//获取HTML元素
let html = document.querySelector('html')
//获取可视区宽
let width = html.getBoundingClientRect().width;
//设置比例 1rem = width / 16
html.style.fontSize = width / 16 + 'px'
</script>
- 在common.scss中：
@function rem($px){
@return $px / 46.875 + rem
}
- 将common.scss引入app.vue中文件中
<style lang="scss">
@import './components/css/common.scss';
</style>
- 在scss中：
div{
font-size:rem(16);
}
二、不在vue中的用法：
- 新建rem.js文件
<script>
//监听自动刷新旋转屏幕改变
window.addEventListener('onorientationchange', setRem);
//监听自动刷新大小
window.addEventListener('resize', setRem);
setRem() // 调用
function setRem() {
//获取HTML元素
let html = document.querySelector('html')
//获取可视区宽
let width = html.getBoundingClientRect().width;
//设置比例 1rem = width / 16
html.style.fontSize = width / 16 + 'px'
</script>
- 将rem.js引到每个html中
<script src="../js/rem.js"></script>
- 在common.css中：
@function rem($px){
@return $px / 46.875 + rem
}
- 将common.css引入每个html中
<link rel="stylesheet" href="../css/common.css">
（建议参考：https://www.jianshu.com/p/57fff7e5bd13）
- 在css（scss）中：
div{
font-size:rem(16);
}
