Explicación detallada del método de adaptación del diseño REM móvil para la página de actividad H5

Después de obtener el borrador del diseño, ¿cómo restaurar el diseño?

Si solo necesita hacer un diseño responsivo no exacto, entonces está bien usar consultas de medios para lograrlo. Si es necesario restaurar con precisión el borrador del diseño, esto generalmente se logra mediante el zoom. Las soluciones comunes incluyen soluciones de escalado basadas en ventanas gráficas y rem.

En el lado móvil, el propósito se puede lograr escalando la proporción del tamaño de la página a través de la ventana gráfica.

En pocas palabras, todos los píxeles de ancho y alto son los mismos que los de la salida del manuscrito visual, y luego la ventana gráfica se establece dinámicamente a través de la relación entre el ancho de la página y el ancho del manuscrito visual. Referencia del código central del esquema de escala:

 (función () { var docEl = document.documentElement; var isMobile = window.isMobile /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i.test(navigator.userAgent); función setScale( ) { var escala de página = 1 si (ventana.top! == ventana) { retorno escala de página } var ancho = docEl.clientWidth || 360; var altura = docEl.clientHeight || 640; if (ancho / alto >= 360/640) { // Prioridad de altura escala de página = altura / 640; contenido = 'ancho=' + 360 + ', escala-inicial=' + escaladepágina + ', escala máxima =' + escala de página + ', escalable por usuario = no'; document.getElementById('viewport').setAttribute('contenido', contenido ventana.pageScale = escala de página } if (isMobile) { setScale(); ; } else { docEl.nombreClase += 'pc';

Esta solución se practicó en el diseño de nuestra página de actividades H5 el año pasado.

Sin embargo, si desea que se muestre en la PC, dado que no existe el concepto de escala de ventana gráfica, solo se puede configurar con un valor fijo, lo cual no es ideal.

La solución de adaptación de diseño rem se ha mencionado con frecuencia y se utiliza ampliamente en los productos de las principales empresas de Internet.

En pocas palabras, el método es:

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.

Pongamos un ejemplo para ilustrar.

El primer problema es el cálculo dinámico del tamaño de fuente de las etiquetas html. Esto depende de cómo se acuerde la tasa de conversión. Tomando como ejemplo diez partes iguales del ancho de la página, la referencia del código principal:

 (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) { width = 1080; var rem = width / 10; console.log(rem); docEl.style.fontSize = rem + 'px' // Procesamiento de errores y compatibilidad en algunos modelos var actualSize = win .getComputedStyle && parseFloat(win.getComputedStyle(docEl)[tamaño de fuente]); if (actualSize!== rem && actualSize > 0 && Math.abs(actualSize - rem) > 1) { var remScaled = rem * rem / actualSize; docEl.style.fontSize = remScaled + 'px'; var timer; //Función de limitación de funciones dbcRefresh( ) { clearTimeout(temporizador); temporizador = setTimeout(setFontSize, 100); //Las actualizaciones de la ventana cambian 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 () } }, falso); setFontSize();})(ventana)

Además, para las páginas de actividad H5 en pantalla completa, existen requisitos para la relación de aspecto y se deben realizar ajustes en este momento. Puedes hacerlo así:

 función ajustarWarp(warpId = '#warp') { // if (window.isMobile) return; const $win = $(window altura = $win.height(); // Considere la barra de navegación if (ancho / alto < 360/600) { return } ancho = Math.ceil(alto * 360/640); $(warpId).css({ altura, ancho, posición: 'relativa', arriba: 0, izquierda: 'auto', margen: '0 auto' }); // Recalcular rem window.setFontSize(width);}

Siguiendo este método de escala, se pueden lograr diseños precisos con escala proporcional en casi cualquier dispositivo.

El segundo problema es el valor del tamaño del elemento.

Tomando como ejemplo el ancho del borrador del diseño como 1080 px, dividimos el ancho en 10 partes iguales para facilitar la conversión, luego 1rem = 1080/10 = 108 px. El método de conversión es:

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

Por ejemplo, hay una imagen en el borrador del diseño con un tamaño de 460x210 y una posición relativa de página arriba: 321px izquierda: 70;. Según el método de conversión anterior, el estilo CSS final del elemento debería ser:

 .img_demo { posición: absoluta; tamaño de fondo: portada; imagen de fondo: url('demo.png'); arriba: 2.97222rem; izquierda: 0.64814rem;

Mediante el método anterior, se implementa el esquema de diseño remoto. Pero calcular manualmente el valor de rem obviamente no es realista.

Con la herramienta de preprocesamiento less/sass, solo necesitamos configurar el método mixins y luego establecer el valor de acuerdo con el tamaño real del borrador del diseño. Tomando less como ejemplo, la referencia de mixins es la siguiente:

 // px a rem.px2rem(@px, @attr: 'ancho', @rem: 108rem) { @{attr}: (@px / @rem);}.px2remTLWH(@top, @left, @width, @altura, @rem: 108rem) { .px2rem(@arriba, arriba, @rem); .px2rem(@izquierda, izquierda, @rem); .px2rem(@ancho, ancho, @rem); .px2rem(@altura, altura, @rem);

Para el elemento del ejemplo anterior, el estilo CSS se puede escribir así:

 .img_demo { posición: absoluta; tamaño de fondo: portada; imagen de fondo: url('demo.png');

Aquí, el ancho y el alto se pueden leer directamente desde el tamaño del elemento de imagen resultante en el borrador del diseño; los valores de arriba/izquierda se pueden obtener rápidamente moviendo la línea de referencia para posicionar el elemento en Photoshop.

Escalar fuentes usando proporciones rem causará problemas de visualización. Solo necesita usar consultas de medios para establecer varios tamaños.

Referencia de ejemplo:

 // Pantalla @media que responde a la fuente y (ancho máximo: 321 px) { cuerpo { tamaño de fuente: 13 px; }}pantalla @media y (ancho mínimo: 321 px) y (ancho máximo: 400 px) { cuerpo { fuente - tamaño: 14px; }}@media pantalla y (ancho mínimo: 400px) { cuerpo { tamaño de fuente: 16px;}}

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.