Explicação detalhada do uso de rem+scss para adaptação no celular

rem (tamanho da fonte do elemento raiz) refere-se à unidade de tamanho da fonte relativa ao elemento raiz (ou seja, elemento html).

Supondo que o tamanho da fonte do elemento raiz seja 10px, o tamanho de 5rem é 5*10=50px, por exemplo

 html{ tamanho da fonte: 10px;}p{ largura: 2rem; /* 2*10 = 20px;*/ margem: 1rem;}

No passado, costumávamos usar esta página: definimos a largura da janela de visualização como device-width e, em seguida, selecionamos a largura mínima do dispositivo com o qual precisamos ser compatíveis (geralmente 320px). Crie páginas com base nesta largura mínima. As unidades usam px e porcentagem. Em dispositivos com larguras diferentes, o tamanho da fonte e o tamanho do conteúdo da página são iguais. A diferença é que a distância entre o conteúdo na tela grande é maior do que na tela pequena. Portanto, a desvantagem disso é que a página não é exibida bem em dispositivos de determinados tamanhos.

Se usarmos rem para criar a página, definiremos diferentes tamanhos de fonte no elemento raiz de acordo com as diferentes larguras do dispositivo. Quanto maior for a largura, maior será o tamanho da fonte. Em seguida, use rem para substituir o px original. Dessa forma, o par tamanho da fonte, tamanho do conteúdo aumenta à medida que a largura da tela aumenta.

Primeiro, js define o tamanho da fonte padrão do html (escrito no cabeçalho do html)

 <script type=text/javascript> var bodyElement = document.documentElement || document.body, RC = { w: 750, h: 1206 }, //Largura e altura do rascunho de design padrão GC = { w: document.documentElement.clientWidth || janela.innerWidth || tela.largura, h: document.documentElement.clientHeight || janela.innerHeight || screen.height }; função setFontSize(){ var rightSize = parseFloat((RC.w / RC.h).toFixed(1)), currentSize = parseFloat((GC.w / GC.h).toFixed(1)) , lastHTMLSize = 16, // O padrão 16 é porque o tamanho da fonte padrão do html é 16px html = document.getElementsByTagName(html)[0]; if(rightSize > currentSize){ // Tela longa lastHTMLSize = 16;else if(rightSize < currentSize){ // Tela larga lastHTMLSize = (RC.h / GC.h * GC .w) /RC.w * 16 } html.style.fontSize = GC.w / lastHTMLSize + 'px'; } setFontSize();</script>

Defina o arquivo scss px como rem

 // O padrão 16 é o tamanho de fonte padrão do HTML // O padrão 750 é a largura padrão do rascunho do design // $n é a distância medida do rascunho do design @charset UTF-8; { @return $n / (750/16)+rem;}

Edite funções para chamadas fáceis:

 @function getTop($n) { @return ($n - 1206/2) / (750/16)+rem;} @function getLeft($n) { @return ($n - 750/2) / (750 / 16)+rem;}@function getRight($n) { @return (($n - 750) / 2) / (750 / 16)+rem;}@mixin center($left, $top) { //Alterar posição: absoluto; esquerda: 50%; superior: rem($top); mixin centerlt($left, $top) { //Para cima e para baixo, posição central esquerda e direita: absoluta esquerda: 50% top: 50% margin: getTop($top) 0 0; getLeft($left);}@mixin centerrt($right, $top) { //Para cima e para baixo, posição central esquerda e direita: absoluta direita: 50% top: 50% margin: getTop($top) getRight; ($right) 0 0;}@mixin middlert($right, $top) { //Alterar posição para cima, para baixo, centro, direita: direita absoluta: rem($right top: 50% margin: getTop(); $ superior) 0 0 0;}@mixin centerb($left, $bottom) { //Alterar posição: absoluta; esquerda: 50%; rem($bottom margin: 0 0 0 getLeft($left); leftTop($left, $top) { //Muda da esquerda para a posição superior: absoluto left: rem($left); $top) { //Alterar a posição da direita: absoluto; esquerda: rem($esquerda); inferior: rem($inferior);}

Chame a função acima (a distância de largura e altura pode ser medida em ps para medir a distância real. A largura de rascunho do projeto padrão é 750):

 .page1-img1{ largura: rem(473); altura: rem(173);

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.