新建两个css空文件
分别是reset.scss和global.scss
放在assets下
reset.scss的内容在
https://meyerweb.com/eric/tools/css/reset/index.html
移动端适配加上:
html, body{
height: 100%;
width: 100%;
user-select: none; //默认设置不允许长按选中文字
overflow: hidden;
}
global.scss的内容如下
@import "./reset.scss";
$ratio : 375 / 10;
@function px2rem($px){
@return $px / $ratio + rem
}
app.vue的script内容如下
<script>
export default {}
document.addEventListener('DOMContentLoaded', () => {
const html = document.querySelector('html')
let fontSize = window.innerWidth / 10
if (fontSize > 50) fontSize = 50
html.style.fontSize = fontSize + 'px'
})
</script>
使用:
页面内
<style lang="scss" scoped>
@import "~@/assets/global.scss";
.test {
font-size: px2rem(30);
}
</style>
