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;
    // 1920px为UI图的设计稿尺寸
    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();
            });
        });