可视化大屏项目适配方案总结(一)

话不多说，上干货。

rem适配

根据html元素的fontSize大小计算rem值，即 1rem = html.fontSize

html {
    font-size: 10vw;
}
body {
    font-size: 14px;
}
div {
    width: 10rem; // 10 * 10vw = 100vw;
}

可以在vue.config.js中设置全局额外less变量（其他语言一样 向预处理器-loader-传递选项）

// 假设设计稿的宽度是1920px
{
    css: {
        loaderOptions: {
            less: {
                globalVars: {
                    'px2rem' : 1920 / 10 + 'rem',
                }
            }
        }
    }
}

在less中使用

div {
    width: 300 / @px2rem; // 300 / 1920 * 10 * 10vw; 即根据vw计算颗粒的宽度
}

补充：

1. 常用rem.js进行适配

// 通过window.resize监听事件计算视口宽度document.documentElement.clientWidth动态设置html元素的fontSize
// 当前页面宽度相对于 1920px(设计稿尺寸)的缩放比例。
const designWidth = 1920;
function setRem() {
    const scale = document.documentElement.clientWidth / designWidth; 
    document.documentElement.style.fontSize = `${scale}px`; 
} 
setRem();
widnow.addEventListener('resize', setRem)

2. @media + rem布局

rem适配不足：通过大量计算，确定元素尺寸，对性能有影响

vw, em, 百分比等适配

vw, vh尺寸单位，表示视口宽度和高度， 即100vw(vh) = 视口宽度(高度)

em单位，根据(父级 ｜ 自身).fontSize决定， 即1em = (自身 | 父级).fontSize

百分比, 根据父级元素宽高决定

meta标签(仅移动端)

动态修改meta标签initScale属性对页面进行适配

<meta name="viewport" content="width=device-width, initial-scale=1.0/>

// 当前页面宽度相对于 1920px(设计稿尺寸)的缩放比例。
const designWidth = 1920px;
function setMeta() {
    const scale = document.documentElement.clientWidth / designWidth; 
    const content = `initial-scale=${i}, minimum-scale=${i}, maximum-scale=${i}`;
    for (let item of document.head?.children || []) {
        if (item?.tagName === 'META' && item?.name === 'viewport') {
            return item.content = content;
        }
    }
    document.head.innerHTML += `<meta name="viewport" content="${content}">`;
} 
setMeta();
widnow.addEventListener('resize', setMeta)

transform：scale适配(有缺陷)

根据C3属性，对元素进缩放

// 当前页面宽度相对于 1920px(设计稿尺寸)的缩放比例。 
function setScale(designWidth) {
    const scale = document.documentElement.clientWidth / designWidth; 
    document.body.style.transformOrigin = `0 0`; 
    document.body.style.transform = `scale(scale)`; 
} 
setScale(1920);
widnow.addEventListener('resize', () => setScale(1920))

zoom适配（有缺陷）

缩放元素尺寸，可能会导致事件绑定紊乱

适配方法跟transform适配类似

transform，zoom导致事件绑定紊乱的原因：

1. 缩放导致元素视图发生改变，但是元素实际宽度尺寸没有变化, 如offsetWidth； offsetLeft；
2. 当通过pageX，offsetWidth， offsetLeft做一些逻辑处理时就会导致一些错乱
3. 对于canvas画布，慎用transform，zoom布局

结尾

🌟感谢您的阅读， 如有问题和补充请指出，谢谢🌟