Explicação detalhada do método de adaptação do layout REM móvel para a página de atividades H5

Depois de obter o rascunho do projeto, como restaurar o layout?

Se você precisar apenas fazer um design responsivo não exato, não há problema em usar consultas de mídia para alcançá-lo. Se for necessário restaurar com precisão o rascunho do projeto, isso geralmente é feito através do zoom. As soluções comuns incluem soluções de dimensionamento baseadas em viewport e rem.

No lado móvel, o objetivo pode ser alcançado dimensionando a proporção do tamanho da página através da janela de visualização.

Simplificando, todos os pixels de largura e altura são iguais à saída do manuscrito visual e, em seguida, a janela de visualização é definida dinamicamente por meio da proporção entre a largura da página e a largura do manuscrito visual. Referência do código principal do esquema de escalonamento:

 (function () { var docEl = document.documentElement; var isMobile = window.isMobile /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i.test(navigator.userAgent); function setScale( ) { var pageScale = 1; if (window.top! == janela) { return pageScale } var largura = docEl.clientWidth || 360; var height = docEl.clientHeight || 640; conteúdo = 'largura =' + 360 + ', escala inicial =' + pageScale + ', escala máxima=' + pageScale + ', escalável pelo usuário = não'; document.getElementById('viewport').setAttribute('content', content); ; } else { docEl.className += 'pc' }})();

Esta solução foi praticada em nosso design de página de atividades H5 no ano passado.

Porém, se quiser que seja exibido no PC, como não existe o conceito de escala de viewport, ele só pode ser definido com um valor fixo, o que não é o ideal.

A solução de adaptação de layout rem tem sido mencionada com frequência e é amplamente utilizada nos produtos das principais empresas de Internet.

Simplificando, o método é:

1. Calcular e definir dinamicamente o tamanho da fonte da tag raiz HTML de acordo com a proporção entre o rascunho do design e a largura do dispositivo;
2. Em css, a largura, altura, posição relativa, etc. dos elementos do rascunho do projeto são convertidos em valores em unidades rem na mesma proporção;
3. As fontes no rascunho do design usam px como unidade e são ligeiramente ajustadas por meio de consultas de mídia.

Vamos dar um exemplo para ilustrar.

O primeiro problema é o cálculo dinâmico do tamanho da fonte das tags HTML. Isso depende de como a taxa de conversão é acordada. Tomando como exemplo dez partes iguais da largura da página, a referência do código principal:

 (function(WIN) { var setFontSize = WIN.setFontSize = function (_width) { var docEl = document.documentElement; // Obtenha a largura da janela atual var width = _width || docEl.clientWidth; // docEl.getBoundingClientRect( ).largura; // Maior que 1080px pressione 1080 if (largura > 1080) { width = 1080 } var rem = width / 10; console.log(rem); parseFloat(win.getComputedStyle(docEl)[tamanho da fonte]); actualSize > 0 && Math.abs(actualSize - rem) > 1) { var remScaled = rem * rem / actualSize; {clearTimeout(temporizador);setTimeout(setFontSize, 100); //As atualizações da janela alteram dinamicamente o tamanho da fonte WIN.addEventListener('resize', dbcRefresh, false); //Calcula uma vez quando a página é exibida WIN.addEventListener('pageshow', function(e) { if (e.persisted) { dbcRefresh() } }, false); setFontSize();})(janela)

Além disso, para páginas de atividades H5 em tela cheia, há requisitos para a proporção e ajustes devem ser feitos neste momento. Você pode fazer assim:

 função ajustarWarp(warpId = '#warp') { // if (window.isMobile) return; const $win = $(window); // Considere a barra de navegação if (width / height < 360/600) { return } width = Math.ceil(height * 360/640); $(warpId).css({ altura, largura, posição: 'relativa', topo: 0, esquerda: 'auto', margem: '0 auto' }); // Recalcular rem window.setFontSize(width);}

Seguindo este método de dimensionamento, layouts precisos com dimensionamento proporcional podem ser obtidos em praticamente qualquer dispositivo.

O segundo problema é o valor do tamanho do elemento.

Tomando a largura do rascunho do design como 1080px como exemplo, dividimos a largura em 10 partes iguais para facilitar a conversão, então 1rem = 1080/10 = 108px. O método de conversão é:

 const px2rem = function(px, rem = 108) { let remVal = parseFloat(px) / rem if (typeof px === string && px.match(/px$/)) { remVal += 'rem' }; return ValorRem;}

Por exemplo, há uma imagem no rascunho do design com tamanho de 460x210 e posição relativa da página top: 321px left: 70;. De acordo com o método de conversão acima, o estilo CSS final do elemento deve ser:

 .img_demo {posição: absoluto; tamanho do fundo: capa; imagem de fundo: url('demo.png');

Através do método acima, o esquema de layout rem é realizado. Mas calcular manualmente o valor de rem é obviamente irrealista.

Com a ferramenta de pré-processamento less/sass, precisamos apenas definir o método mixins e, em seguida, definir o valor de acordo com o tamanho real do rascunho do projeto. Tomando less como exemplo, a referência dos mixins é a seguinte:

 // px para rem.px2rem(@px, @attr: 'width', @rem: 108rem) { @{attr}: (@px / @rem);}.px2remTLWH(@top, @left, @width, @altura, @rem: 108rem) { .px2rem(@top, top, @rem); .px2rem(@esquerda, esquerda, @rem); .px2rem(@largura, largura, @rem);}

Para o elemento do exemplo anterior, o estilo css pode ser escrito assim:

 .img_demo {posição: absoluto; tamanho de fundo: capa; imagem de fundo: url('demo.png');}

Aqui, a largura e a altura podem ser lidas diretamente do tamanho do elemento de imagem gerado no rascunho do design; os valores superior/esquerdo podem ser obtidos rapidamente movendo a linha de referência para posicionar o elemento no Photoshop;

Dimensionar fontes usando proporções rem causará problemas de exibição. Você só precisa usar consultas de mídia para definir vários tamanhos.

Referência de exemplo:

 // Fonte responsiva @media screen and (max-width: 321px) { body { font-size: }}@media screen and (min-width: 321px) and (max-width: 400px) { body { font - tamanho: 14px; }}@media tela e (largura mínima: 400px) { corpo { tamanho da fonte: 16px;}}

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.