Explicação detalhada do layout de adaptação rem

Existem muitos tipos de telefones celulares hoje, sem falar na série iPhone, existem inúmeros tipos de telefones Android, então é impossível escrever um conjunto de estilos de layout para cada telefone celular. Isso também é impossível, mas para front-ends. que buscam cada vez mais a excelência Disse, é claro, para encontrar uma solução razoável. rem é usado para layout adaptativo.

O efeito a ser alcançado pela adaptação é mostrado abaixo (uma demonstração simples)

Os dois divs ocupam metade da tela, independentemente de estarem em uma tela grande ou pequena.

Embora o simples uso de porcentagens acima possa ser alcançado, as porcentagens não conseguem adaptar a fonte e ainda é difícil converter porcentagens em tamanhos correspondentes. A seguir, vamos falar sobre nosso protagonista rem desta vez (normalmente só nos adaptamos à largura)

Em primeiro lugar, rem é uma unidade relativa ao tamanho fontSize do elemento raiz, ou seja, 1rem é igual ao tamanho fontSize do html. Em seguida, só precisamos alterar o fontSize do elemento html para controlar o. tamanho de rem. A seguir, como nos adaptamos a diferentes telas, desde que garantamos que quanto maior a largura da tela, maior será o valor de px representado por 1rem e maior será o valor de fontSize do HTML. à largura da tela.

Vamos falar sobre alguns conceitos: proporção de pixels do dispositivo , pixels físicos do dispositivo , pixels independentes do dispositivo (às vezes também chamados de pixels virtuais)

Proporção de pixels do dispositivo = pixels físicos do dispositivo/pixels independentes do dispositivo

Pixel físico do dispositivo: a menor unidade exibida no dispositivo

Pixels independentes de dispositivo: unidades independentes de dispositivo usadas para medir pixels logicamente (dimensões CSS).

Tomemos o iphone6/7/8 como exemplo. Os pixels físicos do iphone6/7/8 são 750, que é o tamanho real do dispositivo, e px é uma unidade de pixel independente do iphone6/7/8 é 2x. tela, e seu tamanho css é 375, a proporção de pixels do dispositivo já está definida quando o dispositivo sai de fábrica. Então, como alcançamos a adaptação?

Isso usa o rem mais popular

Primeiro, de acordo com os pixels físicos do dispositivo em telas diferentes, diferentes tamanhos de px devem ser definidos com o fontSize do elemento html.

1. Inquérito da mídia

 html{font-size:16px;}@media tela e (min-width:240px) { html { font-size:9px;}@media tela e (min-width:320px) {html {font-size:12px; ;}}@media screen e (min-width:375px) {html{font-size:14.0625px;}}

Use @media screen e (min-width:XXX) para determinar o tamanho do dispositivo e, em seguida, defina o fontSize de html

2. js define o fontSize do html (solução NetEase)

 função setRem () { deixe htmlRem = document.documentElement.clientWidth document.documentElement.style.fontSize = htmlRem/7.5 + 'px' }setRem()

O código acima é baseado no iphone6 ​​​​como um rascunho de design, e o resultado é o pixel real de 1rem = 100px Como a proporção de pixels do dispositivo iphone6 ​​​​é 2, 1rem é 50px na visualização do navegador, o que significa que o. A relação entre 1rem e a largura do dispositivo é 7,5 vezes, o tamanho real mudará se a largura do dispositivo mudar em 1rem e a proporção na tela não mudará. (A maioria das soluções no mercado são deste tipo)

3. Use vw, vh

 html{tamanho da fonte: 10vw}

vw e vh são novas unidades relativas que dividem a área visual em 100 partes de largura e altura, semelhante ao layout percentual. Esta solução não requer escrita em js, mas a compatibilidade é um pouco ruim.

Anexado abaixo está a tabela de compatibilidade vw e vh

Cada rem é relativo ao fontSize do elemento raiz, então todo o esforço é definir o fontSize do elemento raiz proporcional à largura do dispositivo

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.