Soluções para dimensionar páginas da web em diferentes resoluções

1. Antecedentes: Uma página com resolução 1920 foi desenvolvida e precisará ser usada na resolução 3840. Use iframe para incorporar index.html

2. Solução: Escreva largura e altura fixas no nó raiz da página desenvolvida (app);

Chame a função de zoom que definimos antecipadamente na função montada no arquivo vue. Aqui precisamos aumentar o zoom em index.html

O método de definição é o seguinte:

calcRadio(id) {
        //因为是在大屏上执行此函数，这里宽度和高度计算的结果当然为大分辨率的数值
            let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            let height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        //此时计算大屏显示我们需要的放大倍数
            let xb = width / 1920;
            let yb = height / 1080;
            let ox = document.getElementById(id);
        //最后用css设置放大样式
            ox.style.transform = 'scale(' + xb + ', ' + yb + ')';
            ox.style['-ms-transform'] = 'scale(' + xb + ', ' + yb + ')';
            ox.style['-webkit-transform'] = 'scale(' + xb + ', ' + yb + ')';
            ox.style['-moz-transform'] = 'scale(' + xb + ', ' + yb + ')';
            ox.style['-o-transform'] = 'scale(' + xb + ', ' + yb + ')';
            ox.style['transform-origin'] = '0 0';
            ox.style['-ms-transform-origin'] = '0 0';
            ox.style['-webkit-transform-origin'] = '0 0';
            ox.style['-moz-transform-origin'] = '0 0';
            ox.style['-o-transform-origin'] = '0 0';
        },

Se o nó que precisamos ampliar for apenas um nó raiz comum, a origem central da ampliação poderá ser definida como '0,0';

Se for qualquer outra situação, precisa ser analisada caso a caso.

3. Além de chamá-lo na função de gancho montado, também precisamos chamá-lo para recalcular o fator de ampliação quando a janela muda.

Portanto precisamos escrever na função de escuta:

window.onresize = () => {
          this.calcRadio('app');
        };

4. Pergunta: Você tem alguma outra boa solução de dimensionamento? Vamos comentar juntos, e por falar nisso, vamos falar sobre o impacto do dimensionamento nas fontes, haha. . . . . Este é um pequeno poço.