主动获取视口最大最小宽度

在开发中如何自定义获取视口显示的宽度呢 ？

• 在public 文件夹下新建js文件夹 并新建rem.js 文件

// 自定义获取视图宽度的js 方法 
function remSize() {
    var reamWidth = document.documentElement.clientWidth || window.innerWidth
    if (reamWidth >= 750) {
    //这里可以改为自己需要的最大宽度
        reamWidth = 750;
    }
    if (reamWidth <= 320) {
        reamWidth = 320 + px
    }
    // 设置全局的默认字体大小
    document.documentElement.style.fontSize = (reamWidth / 7.5) + 'px'
    // 设置系统默认字体
    document.querySelector('body').fontSize = 0.16 + 'rem'
}
remSize()
// 浏览器视图大小发生改变时重新调用js 方法
window.onresize = function() {
    remSize()
}

• 在 index.html 文件中导入当前文件就可以使用了

// 需要注意的是: 因为上面设置字体的使用对象是body 所以 应该需要在body 中导入 否则设置字体的方法不会生效
 <script src="<%= BASE_URL %>js/rem.js"></script>