Adaptación de pantalla

En CSS, generalmente usamos px como unidad. Cabe señalar que px en los estilos CSS no es igual a píxeles físicos. El píxel en CSS es solo una unidad abstracta. En diferentes dispositivos o entornos, el píxel físico representado por 1 px en CSS es diferente. En el lado de la PC, 1 px de CSS generalmente corresponde a un píxel físico de la pantalla de la computadora, pero en el lado móvil, 1 px de CSS equivale a varios píxeles físicos, lo que está relacionado con la densidad de píxeles de la pantalla.

En primer lugar: debemos entender varios conceptos, a saber: pantalla Retina, píxeles físicos, píxeles independientes del dispositivo, proporción de píxeles del dispositivo

La llamada "Retina" es un estándar de visualización , que es la mayor cantidad de píxeles que se comprimen en una pantalla, logrando así una mayor resolución y mejorando el detalle de la visualización de la pantalla. Desarrollado por Motorola. Inicialmente esta tecnología se utilizó en el Moto Aura. Esta resolución es suficiente para hacer que los píxeles individuales sean indistinguibles a simple vista a distancias de visión normales. También conocida como pantalla retina. Las pantallas Retina se utilizan generalmente en productos Apple, como MacBook, iPad, iPhone, etc.

Los píxeles físicos también se denominan píxeles del dispositivo y son los más pequeños de las pantallas (pantallas de computadora, teléfonos móviles). unidad de visualización física, cada píxel físico consta de un valor de color y un valor de brillo. La llamada pantalla doble, pantalla doble (Retina) y pantalla triple se refieren a cuántos píxeles físicos usa el dispositivo para mostrar un píxel CSS. En otras palabras, una pantalla múltiple usa más píxeles físicos y más finos para mostrar un CSS. pixel. Píxeles CSS, en una pantalla normal, 1 píxel CSS corresponde a 1 píxel físico, pero en una pantalla Retina doble, 1 píxel CSS corresponde a 4 píxeles físicos

Los píxeles independientes del dispositivo son nuestros El píxel utilizado Al escribir CSS es una unidad abstracta, que se utiliza principalmente en los navegadores para medir con precisión el contenido de las páginas web.

La proporción de píxeles del dispositivo se conoce como dpr, que es la proporción entre píxeles físicos y píxeles independientes del dispositivo.

Cuando la relación es 1:1, se utiliza 1 píxel del dispositivo para mostrar 1 píxel CSS. Cuando la relación es 2:1=2, se utilizan 4 (2 2) píxeles del dispositivo para mostrar 1 píxel CSS. Cuando la relación es 3:1=3, se utilizan 9 (3 3) píxeles del dispositivo para mostrar 1 píxel CSS.

Cabe señalar aquí que dpr=2 no significa que el píxel físico sea el doble del píxel independiente del dispositivo, sino que se utilizan 4 píxeles físicos para representar un píxel lógico del dispositivo

¡Debería decirse que 1 píxel independiente del dispositivo es 4 veces más que 1 píxel físico! ! ! ! ! , porque los 4 píxeles físicos de su red representan el píxel independiente de mi dispositivo.

DPR solo representa una relación numérica, no una relación múltiple.

CSS 1px es igual a varios píxeles físicos. Además de estar relacionado con la densidad de píxeles de la pantalla dpr, también está relacionado con la escala del usuario. Por ejemplo, cuando el usuario duplica el tamaño de la página, los píxeles físicos representados por 1 px en CSS también se duplicarán; por el contrario, cuando la página se duplica, los píxeles físicos representados por 1 px en CSS también se duplicarán; Con respecto a este punto, hablaremos de ello más adelante en el tema de la línea delgada de 1px.

Para aquellos que sólo necesitan adaptarse a un número reducido de dispositivos móviles y la resolución tiene poco impacto en la página, utilice px.

Si necesita adaptarse a varios dispositivos móviles, utilice rem. Por ejemplo, solo necesita adaptarse a dispositivos con grandes diferencias de resolución, como iPhone y iPad.

rem es la unidad de tamaño de fuente relativa al elemento raíz, que es el tamaño de fuente de HTML. El tamaño de fuente predeterminado del navegador es 16 px, por lo que el valor predeterminado 1rem = 16 px, podemos ajustarlo dinámicamente. según el ancho del dispositivo Establezca el tamaño de fuente del elemento raíz para que los elementos en unidades rem se presenten con efectos visuales relativamente consistentes en diferentes terminales.

De hecho, rem divide la pantalla en un número específico de partes. Tomando 20 partes como ejemplo, cada parte es 1rem. El tamaño correspondiente a 1rem es el valor de referencia de rem. el valor de referencia rem al tamaño de fuente de lt. ;htmlgt;, por lo que si el ancho de píxel físico del dispositivo es de 640 px y se divide en 20 partes, entonces 1rem=640px/20=32px, el valor de fuente de lt;htmlgt; el tamaño es 32px.

Por supuesto, también puedes dividirlo en 30 partes, 40 partes, 60 partes, etc. Depende de tus propias preferencias.

Cuando realmente cortamos los dibujos, para el. borrador visual Para convertir tamaños de elementos, solo necesita dividir el valor px original del elemento (es decir, el tamaño que midió) por el valor base rem. Por ejemplo, el tamaño del borrador del diseño es 640 px y el valor base rem = 640 px/20 = 32 px. Si mide el tamaño de un elemento para que sea 140 px 286 px *, entonces la conversión es:

En. de esta manera, podemos usar rem en su lugar. El píxel es px y es adaptable en todos los terminales móviles.

Este método es actualmente un mejor método de adaptación, pero rem es muy problemático de calcular y hay muchos. decimales En este momento, puedes intentar usar menos para resolver el problema decimal de rem