VUE中设定窗口为固定值

在vue开发时，不同窗口宽度下的样式问题一直是个很头疼的问题，这个在移动端尤为明显，所以是否有某种方式可以去根据窗口的宽度或者其他的数值自动调整页面的样式呢？
首先说到页面宽度，最先想到的肯定是vw，根据规定，一个窗口的长度始终为100vw，1vw等于当前窗口宽度的1%，所以使用vw确实可以解决页面在不同分辨率下的样式问题，但100vw为100等分，在实际的开发过程中确实过小了，而在开发微信小程序的时候，根据微信的设置，750rpx就代表一个窗口的宽度，rpx就是微信小程序中设置的单位，所以在VUE或者其他前端项目开发中是否也可以设置某个单位的功能与rpx是一样的功能呢？
经过查找，发现rem的功能可能与rpx的功能相似，rem是根据HTML根元素的字体大小自动设置的，所以我们只要去设置HTML根元素字体大小就可以去实现这个功能了（关于rem的概念，这边只是简述，如果不懂，可以自行百度。另外，此处不考虑IE8级以下和其他暂不支持rem浏览器的适配）。
首先在项目public文件夹下的index.html中去编写一个js方法去计算根元素的字体大小，具体的思路就是，在页面显示后，自动获取根节点的宽度，根据比例去计算出根节点的字体大小，再将计算出来的字体设置到根节点上。具体代码如下（本案例中的设定为750rem为窗口的宽度）：

<script>
    (function (win) {
        let designSize = 750; // 窗口的设计尺寸，意味着750rem为一个窗口的宽度。
        let html = document.documentElement; // 当前窗口对象
        let wW = html.clientWidth; // 当前窗口宽度
        let rem = wW / designSize; // 计算比例
        document.documentElement.style.fontSize = rem + 'px'; // 设置根节点的字体大小
    })(window)
</script>

设置完毕后，新建一个页面进行查看效果

<template>
    <div class="page">
        <div class="row">
        </div>
    </div>
</template>
<style>
    .page{
        width: 750rem;
        height: 60px;
        background: #FFFFFF;
        text-align: center;
    }
    .row{
        width: 300rem;
        height: 60px;
        background: #AAAAAA;
        text-align: center;
    }
</style>

效果如下:

image.png

按理讲，以上就已经实现了页面上的设置，但是在实际开发的过程中，还是会遇到浏览器的窗口大小变化，而所有的设置是根据变化前的数据去设置的，所以我们还需要增加一个监听窗口变化的方法去动态设置相关参数。具体代码如下：

<script>
    (function (win) {
        var watch;
        function refreshRem() {
            let designSize = 1920; // 窗口的设计尺寸
            let html = document.documentElement; // 当前窗口对象
            let wW = html.clientWidth; // 当前窗口宽度
            let rem = wW * 1 / designSize; // 计算比例
            document.documentElement.style.fontSize = rem + 'px'; // 设置根节点的字体大小
        }
        // 监听窗口变化
        win.addEventListener('resize', function () {
            // 先清除原先未执行的设置，因为设置设置了300ms的延时
            clearTimeout(watch);
            // 重新设定新的设置，300ms后执行，延时是防止获取窗口变化时获取的窗口宽度出错
            watch = setTimeout(refreshRem, 300);
        }, false);
        refreshRem();
    })(window)
</script>

为了更加严谨，还需要防止在同一个浏览器中切换到其他页面上，并在其他页面上更改了窗口大小，然后再切换回当前页面，完整代码如下：

<script>
    (function (win) {
        var watch;
        function refreshRem() {
            let designSize = 1920; // 窗口的设计尺寸
            let html = document.documentElement; // 当前窗口对象
            let wW = html.clientWidth; // 当前窗口宽度
            let rem = wW * 1 / designSize; // 计算比例
            document.documentElement.style.fontSize = rem + 'px'; // 设置根节点的字体大小
        }
        // 监听窗口变化
        win.addEventListener('resize', function () {
            // 先清除原先未执行的设置，因为设置设置了300ms的延时
            clearTimeout(watch);
            // 重新设定新的设置，300ms后执行，延时是防止获取窗口变化时获取的窗口宽度出错
            watch = setTimeout(refreshRem, 300);
        }, false);
        // 监听页面显示或者切换
        win.addEventListener('pageshow', function (e) {
            // 在页面显示的情况下
            if (e.persisted) {
                clearTimeout(watch);
                watch = setTimeout(refreshRem, 300);
            }
        }, false);
        refreshRem();
    })(window)
</script>