Explicación detallada del diseño de adaptación rem

Hay muchos tipos de teléfonos móviles hoy en día, sin mencionar la serie iPhone, hay innumerables tipos de teléfonos Android, por lo que es imposible escribir un conjunto de estilos de diseño para cada teléfono móvil. Esto también es imposible, excepto para las interfaces. que se esfuerzan cada vez más por alcanzar la excelencia. Dijo, por supuesto, encontrar una solución razonable. rem se utiliza para diseño adaptativo.

El efecto que se logrará mediante la adaptación es el que se muestra a continuación (una demostración simple)

Los dos divs ocupan la mitad de la pantalla sin importar si están en una pantalla grande o pequeña.

Aunque se puede lograr el uso simple de porcentajes anterior, los porcentajes no pueden lograr la adaptación de fuente y aún es difícil convertir los porcentajes al tamaño correspondiente. A continuación, esta vez hablemos de nuestro rem protagonista (normalmente solo nos adaptamos al ancho)

En primer lugar, rem es una unidad relativa al tamaño de fuente del elemento raíz, es decir, 1rem es igual al tamaño de fuente de html. A continuación, solo necesitamos cambiar el tamaño de fuente del elemento html para controlar el tamaño de fuente. tamaño del real. A continuación, ¿cómo nos adaptamos a diferentes pantallas? Siempre y cuando nos aseguremos de que cuanto mayor sea el ancho de la pantalla, mayor será el valor de px representado por 1rem y mayor será el valor de tamaño de fuente de HTML. En otras palabras, el tamaño de fuente de HTML debe ser proporcional. al ancho de la pantalla.

Hablemos de algunos conceptos: proporción de píxeles del dispositivo , píxeles físicos del dispositivo , píxeles independientes del dispositivo (a veces también llamados píxeles virtuales)

Relación de píxeles del dispositivo = píxeles físicos del dispositivo/píxeles independientes del dispositivo

Píxel físico del dispositivo: la unidad más pequeña que se muestra en el dispositivo

Píxeles independientes del dispositivo: unidades independientes del dispositivo utilizadas para medir píxeles de forma lógica (dimensiones CSS).

Tome iphone6/7/8 como ejemplo. Los píxeles físicos de iphone6/7/8 son 750, que es el tamaño real del dispositivo, y px es una unidad de píxeles independiente del dispositivo iphone6/7/8. pantalla y su tamaño CSS es 375, la proporción de píxeles del dispositivo ya está configurada cuando el dispositivo sale de fábrica. Entonces, ¿cómo logramos la adaptación?

Esto utiliza el rem más popular.

Primero, de acuerdo con los píxeles físicos del dispositivo en diferentes pantallas, se deben configurar diferentes tamaños de px con el tamaño de fuente del elemento html.

1. Consulta de los medios

 html{font-size:16px;}@pantalla multimedia y (ancho mínimo:240px) { html {tamaño de fuente:9px }}@pantalla multimedia y (ancho mínimo:320px) {html {tamaño de fuente:12px; ;}}@pantalla multimedia y (ancho mínimo:375px) {html{font-size:14.0625px;}}

Utilice la pantalla @media y (ancho mínimo: XXX) para determinar el tamaño del dispositivo y luego configure el tamaño de fuente de html

2. js establece el tamaño de fuente de html (solución NetEase)

 función setRem () { let htmlRem = document.documentElement.clientWidth document.documentElement.style.fontSize = htmlRem/7.5 + 'px' }setRem()

El código anterior se basa en el iPhone6 ​​​​como borrador de diseño, y el resultado es el píxel real de 1rem = 100px. Debido a que la proporción de píxeles del dispositivo del iphone6 ​​​​es 2, 1rem es 50px en la vista previa del navegador, lo que significa que. La relación entre 1rem y el ancho del dispositivo es 7,5 veces, el tamaño real cambiará si el ancho del dispositivo cambia en 1rem y la proporción en la pantalla no cambiará. (La mayoría de las soluciones del mercado son de este tipo)

3. Utilice vw, vh

 html{tamaño de fuente: 10vw}

vw y vh son nuevas unidades relativas que dividen el área visual en 100 partes de ancho y alto, similar al diseño porcentual. Esta solución no requiere escribir js, pero la compatibilidad es un poco pobre.

Adjunto a continuación la tabla de compatibilidad vw y vh

Cada rem es relativo al tamaño de fuente del elemento raíz, por lo que todo el esfuerzo es establecer el tamaño de fuente del elemento raíz proporcional al ancho del dispositivo.

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.