原理:PC端:监听屏幕尺寸改变根字体大小,使用rem实现元素的大小;移动端使用@media @media (max-width: 800px){ }改变样式
let _this = this //保存this
window.addEventListener("resize", function () { //添加屏幕尺寸监听
_this.screenWidth = document.body.clientWidth;
document.documentElement.style.fontSize = //改变根节点的字体大小,最大30px,最小20px
30 * (_this.screenWidth / 1920) < 20
? 20 + "px"
: 30 * (_this.screenWidth / 1920) + "px";
});
window.addEventListener("load", function () { //监听页面加载
_this.screenWidth = document.body.clientWidth;
console.log(document.body.clientWidth);
document.documentElement.style.fontSize =
30 * (_this.screenWidth / 1920) < 20
? 20 + "px"
: 30 * (_this.screenWidth / 1920) + "px";
});
可以通过获取到的屏幕尺寸控制展示pc元素还是移动端的元素(v-if)