Explicação detalhada do método de adaptação de layout rem de página HTML5

Os principais métodos são:

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.

Versão geral simplificada:

 !(function(win, doc){ function setFontSize() { // Obtém a largura da janela // É assim que o zepto implementa $(window).width() var winWidth = window.innerWidth; // doc.documentElement.style. fontSize = (winWidth / 640) * 100 + 'px' ; // Limitar a largura acima de 640 requer que o css corresponda ao tamanho da var = (winWidth/640) * 100; doc.documentElement.style.fontSize = (tamanho <100? tamanho: 100) + 'px' } var evt = 'onorientationchange' em win? temporizador = null; win.addEventListener (evt, função () { clearTimeout (temporizador); temporizador = setTimeout(setFontSize, 300 }, false); win.addEventListener(pageshow, function(e) { if (e.persisted) { clearTimeout(timer); timer = setTimeout(setFontSize, 300); } }, false); //Inicializar setFontSize();}(janela, documento));

Versão altamente precisa:

 (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); .getComputedStyle(docEl)[tamanho da fonte]); if (actualSize !== rem && actualSize > 0 && Math.abs(actualSize - rem) > 1) { var remScaled = rem * rem / actualSize = remScaled + 'px'; var timer; = setTimeout(setFontSize, 100); //A atualização da janela altera 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 ();})(window)//Para páginas push de atividade H5, a proporção de largura e altura é necessária e a função AdjustWarp(warpId = '#warp') { const $win = $(window); const height = $win.height(); let width = $win.width(); ) { return; } largura = Math.ceil(altura * 360/640); $(warpId).css({ altura, largura, posição: 'relativa', topo: 0, esquerda: 'auto', margin: '0 auto' }); // Recalcular rem window.setFontSize(width);}

Fácil de usar, mas sem flexibilidade, assista à demonstração.

 @media screen e (min-width: 320px){html{font-size:50px}}@media screen e (min-width: 360px){html{font-size:56.25px}}@media screen e (min- largura: 375px){html{font-size:58.59375px}}@media tela e (min-width: 384px){html{font-size:60px}}@media screen e (min-width: 400px){html{font-size:62.5px}}@media screen e (min-width: 414px){html{font- size:64.6875px}}@media tela e (min-width: 424px){html{font-size:66.25px}}@media screen e (min-width: 480px){html{font-size:75px}}@media screen e (min-width: 540px){html{font- size:84.375px}}@media tela e (min-width: 640px){html{tamanho da fonte:100px}}

Ele pode ser modificado apropriadamente de acordo com as necessidades pessoais do projeto e o design do produto. O método de escrita de demonstração acima não é único e fixo.

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.