A solução responsiva h5 mais comumente usada para terminais móveis nos últimos anos é a solução rem. Isso requer o cálculo do tamanho da fonte do elemento raiz para obter capacidade de resposta.
Mas esta solução também tem uma desvantagem, ou seja, quando o tamanho da fonte não é um número inteiro, algumas fontes usam unidades rem, o que causará problemas no tamanho da exibição da fonte. Isso ainda é uma dor de cabeça para o desenvolvimento front-end dos projetos. com altos requisitos de restauração visual Uma coisa.
Resolver a capacidade de resposta do front-end nada mais é do que ser capaz de exibir normalmente em diferentes dispositivos. Aqui apresentamos uma solução responsiva que não requer o método rem. Use px diretamente. Estamos falando aqui do rascunho de design baseado em 750px. Quantos px você mediu no rascunho do design?
Escreva diretamente quantos px. Isso não é muito rápido e não requer conversão rem?
Aqui, na verdade, usamos a escala de transformação para dimensionar o tamanho da página e obter capacidade de resposta.
Código principal:
deixe screenMatch = () => { document.body.style.setProperty('visibilidade', 'oculto') deixe página = document.getElementById(página); , 0 0); page.style.setProperty(transform, scale(+ _scale + )); page.style.setProperty(-webkit-transform-origin, 0 0); page.style.setProperty(-webkit-transfrom, scale(+ _scale + )); , 0 0); page.style.setProperty(transform, scale(+ _scale + )); page.style.setProperty(-webkit-transform-origin, 0 0); page.style.setProperty(-webkit-transfrom, scale(+ _scale + )); ') }, 100); } screenMatch();No código acima, o nó com o id da página é o nó inicial de todo o elemento da página e o primeiro elemento abaixo do corpo. Aqui body/html precisa definir min-height:100%;height:100%;
Na verdade, também podemos usar unidades px em miniprogramas, mas haverá alguns erros de fontes irregulares ao usar transform em miniprogramas. Finalmente, apenas alteramos o atributo zoom e usamos -webkit-zoom para compatibilidade. O código principal não é muito diferente do h5. A mesma coisa é o tamanho do zoom.
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.