Vue项目自适应页面配置

开发项目过程需要自适应页面

1. 在项目根目录创建utils文件夹，在文件夹中创建rem.js文件

// 设置 rem 函数
(function () {
    function setRem () {
    // 1920 默认大小16px;每个元素px基础上/16
        const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
        document.documentElement.style.fontSize = htmlWidth * 16 / 1920 + 'px'
    }
    // 初始化
    setRem()
    // window绑定resize事件监听setRem方法
    window.addEventListener('resize', setRem, false)
})()

2. 在main.js文件引入

import './utils/rem'