Explicación detallada del método de adaptación del diseño remoto de la página HTML5

Los principales métodos son:

1. Calcule y establezca dinámicamente el tamaño de fuente de la etiqueta raíz HTML de acuerdo con la relación entre el borrador del diseño y el ancho del dispositivo;
2. En CSS, el ancho, alto, posición relativa, etc. de los elementos del borrador del diseño se convierten en valores en unidades rem de acuerdo con la misma proporción;
3. Las fuentes en el borrador del diseño utilizan px como unidad y se ajustan ligeramente mediante consultas de medios.

Versión general simplificada:

 !(function(win, doc){ function setFontSize() { // Obtener el ancho de la ventana // Así es como zepto implementa $(window).width() var winWidth = window.innerWidth; // doc.documentElement.style. fontSize = (winWidth / 640) * 100 + 'px' // Limitar el ancho por encima de 640 requiere que CSS coincida con el tamaño de var = (winWidth / 640) * 100; doc.documentElement.style.fontSize = (tamaño < 100? tamaño: 100) + 'px' } var evt = 'onorientationchange' in win? 'orientationchange': 'resize'; temporizador = nulo; win.addEventListener(evt, función () { clearTimeout(temporizador); temporizador = setTimeout(setFontSize, 300); false); win.addEventListener(pageshow, function(e) { if (e.persisted) { clearTimeout(timer); timer = setTimeout(setFontSize, 300); } }, false); //Inicializar setFontSize();}(ventana, documento));

Versión muy precisa:

 (function(WIN) { var setFontSize = WIN.setFontSize = function (_width) { var docEl = document.documentElement; // Obtener el ancho de la ventana actual var width = _width || docEl.clientWidth; // docEl.getBoundingClientRect( ancho; // Mayor que 1080px presione 1080 si (ancho >). 1080) { ancho = 1080; var rem = ancho / 10; console.log(rem); docEl.style.fontSize = rem + 'px' // Procesamiento de errores y compatibilidad var actualSize = win.getComputedStyle && parseFloat( win .getComputedStyle(docEl)[tamaño de fuente]); if (tamaño actual!== rem && tamaño actual > 0 && Math.abs(actualSize - rem) > 1) { var remScaled = rem * rem / actualSize; docEl.style.fontSize = remScaled + 'px' } var timer dbcRefresh() { clearTimeout(timer); = setTimeout(setFontSize, 100 } //La actualización de la ventana cambia dinámicamente el tamaño de fuente) WIN.addEventListener('resize', dbcRefresh, false); // Calcula una vez cuando se muestra la página WIN.addEventListener('pageshow', function(e) { if (e.persisted) { dbcRefresh() } }, false) ; setFontSize ();})(ventana) // Para páginas push de actividad H5, se requiere la relación de ancho y alto, y la función ajustarWarp(warpId = '#warp') { const $win = $(window); const height = $win.height(); let width = $win.width() // Considere la barra de navegación if (ancho / alto < 360/600 ) {retorno;} ancho = Math.ceil(alto * 360/640); $(warpId).css({alto, ancho, posición: 'relativo', arriba: 0, izquierda: 'auto', margen: '0 auto' }); // Recalcular rem window.setFontSize(width);}

Fácil de usar pero carece de flexibilidad, mire la demostración y lo entenderá.

 @media pantalla y (min-width: 320px){html{font-size:50px}}@media screen y (min-width: 360px){html{font-size:56.25px}}@media screen y (min- ancho: 375px){html{font-size:58.59375px}}@pantalla multimedia y (ancho mínimo: 384px){html{font-size:60px}}@pantalla multimedia y (ancho mínimo: 400px){html{font-size:62.5px}}@pantalla multimedia y (ancho mínimo: 414px){html{font- tamaño: 64.6875px}}@pantalla multimedia y (ancho mínimo: 424px){html{font-size:66.25px}}@pantalla multimedia y (ancho mínimo: 480px){html{font-size:75px}}@pantalla multimedia y (ancho mínimo: 540px){html{font- tamaño: 84.375px}}@pantalla multimedia y (ancho mínimo: 640px){html{font-size:100px}}

Se puede modificar adecuadamente según las necesidades del proyecto personal y el diseño del producto. El método de escritura de demostración anterior no es único ni fijo.

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.