vue项目自适应解决方案

场景：页面要实现在不同分辨率，不同设备下，页面布局等比缩放

解决思路：

设置根目录html元素的font-size，其他元素根据根元素，使用rem相对单位，实现等比缩放。

监听浏览器resize，设置根元素html的font-size，其他元素参考html的font-size实现自适应。

代码如下：

/**
 * 设置跟节点 fonst-size
 */
export const setRootHtmlFontSize = () => {
    const rootHtmlDOM = document.getElementsByTagName('html')[0];
    const w = rootHtmlDOM.offsetWidth;
    const fs = Math.round((w / 1920) * 10 * 10) / 10;
    rootHtmlDOM.style.fontSize = `${fs}px`;
    Vue.prototype.$rootFontSize = fs;
};

/**
     * 生命周期 挂载完成
     */
    private mounted() {
        setRootHtmlFontSize();
        this.$nextTick(() => {
            window.addEventListener('resize', () => {
                setRootHtmlFontSize();
            });
        });
    }

.wrapper {
        width: 147.5rem;
        height: 73rem;
        background: rgba(7, 79, 151, 0.8);
        box-shadow: 0 2px 90px 0 rgba(0, 0, 0, 0.2);
        padding: 5rem;
        display: flex;
        margin-top: 7rem;
        .left {
            width: 73.6rem;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            .topLogo {
                width: 69.7rem;
                height: 7.1rem;
                margin-bottom: 1rem;
            }
            .leftImg {
                width: 68rem;
                height: 55.6rem;
                align-self: flex-end;
            }
        }
        .right {
            width: 52.9rem;
            padding-left: 12.9rem;
            align-self: center;
            padding-bottom: 6.8rem;
        }
    }