Vue之移动端viewport-vw适配
// 在main.js或者入口文件中添加以下代码
// 设置rem基准值
function setRem() {
// 获取设备宽度
const deviceWidth = document.documentElement.clientWidth || window.innerWidth;
// 根据设备宽度，调整html的font-size
document.documentElement.style.fontSize = (deviceWidth / 1920) * 100 + 'px';
}
// 初始化设置
setRem();
// 监听窗口大小变化，重新设置rem基准值
window.onresize = function() {
setRem();
};这段代码会在页面初始化时设置基准字体大小，并且在窗口大小发生变化时重新计算并设置基准字体大小。这样就可以实现移动端的viewport-vw适配。在使用时，只需要在样式中使用rem单位来设置元素的尺寸，1rem将等于设备宽度的1/100。
评论已关闭