Recentemente, organizei minhas anotações de meus estudos anteriores de front-end e descobri que realmente não entendo o aspecto de adaptação de tela (rem) da web móvel, apenas sei como usá-lo.
A seguir, registre algumas de suas idéias sobre a adaptação da tela da web móvel (rem).
introdução ao remrem representa o tamanho da fonte do elemento raiz (<html>). Ou seja, se o tamanho da fonte do elemento raiz for 14px, então 1rem = 14px
rem se adapta à web móvel Efeito de adaptaçãoEm telas de tamanhos diferentes, o tamanho do mesmo elemento não parece ser o mesmo, mas a proporção da largura da tela que ocupam é a mesma.
código
// Na tag head do arquivo html <script type=text/javascript> (function(){ var html = document.documentElement; // Obtém a largura da tela (px) var hWidth = html.getBoundingClientRect().width; // Defina o tamanho da fonte da tag html para hWidth/15 html.style.fontSize = hWidth/15 + 'px'; })()</script> // Em menos/* defina a variável @r: 750/15 */@r:50rem div { width: 100/@r; height: 200/@r;} código javascriptPrimeiro, copiamos 1/15 do tamanho da tela (px) para o atributo font-size da tag html. Neste ponto, 1/15 px do tamanho da tela (px) é igual ao tamanho de 1rem em qualquer tamanho de tela. Ou seja: em qualquer tamanho de tela, desde que o mesmo valor rem seja definido para o elemento, o elemento ocupará a mesma proporção da largura da tela em todos os tamanhos de tela, e a proporção será a mesma, e se adaptará a todos os tamanhos de tela.
menos códigoAgora você só precisa converter a unidade px do elemento no rascunho do projeto na unidade rem.
Portanto, neste momento, podemos considerar o rascunho do design como uma tela de celular de um determinado tamanho.
No meu exemplo, a largura do rascunho do design é 750px.
Portanto, 750/15 = 50px, ou seja, em uma tela de celular com o tamanho do rascunho do design, 1rem = 50px.
Então, no código less, definimos uma variável @r.
A largura da div é medida em 100px, pois em uma tela com o tamanho do rascunho do design, 1rem = 50px, então o valor rem da div é: 100/50 rem, ou seja, 100/@r.
A altura da div é medida em 200px, pois em uma tela com o tamanho do rascunho do design, 1rem = 50px, então o valor rem da div é: 200/50 rem, ou seja, 200/@r.
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.