Plano de diseño de página
Por ejemplo: para una pantalla Retina con DPR=2, 1 píxel de mapa de bits corresponde a 4 píxeles físicos. Dado que un solo píxel de mapa de bits no se puede dividir más, el color solo se puede tomar de la ubicación más cercana, lo que da como resultado. en una imagen borrosa. Entonces, para el problema de la claridad de la imagen, una mejor solución es proporcionar el doble de imagen @x2.
La densidad de píxeles indica el número de píxeles DIP independientes del dispositivo que se pueden mostrar en la pantalla del dispositivo. Cuantos más píxeles muestre la pantalla, más detallada será la imagen y más información se podrá mostrar. en la misma área de la pantalla.
La pantalla está compuesta de píxeles, y cada píxel emite luz de un color diferente para formar la interfaz. El tamaño físico de la pantalla no es proporcional al tamaño de los píxeles. Las pantallas de los teléfonos móviles de diferentes tamaños tienen diferentes resoluciones. La resolución es en realidad el ancho y el alto de los píxeles del teléfono móvil.
La densidad de píxeles (píxeles por pulgada, PPI o DPI) representa el número de píxeles DIP independientes del dispositivo dispuestos por pulgada de longitud, 1 pulgada equivale a 2,53 centímetros. Cuanto mayor sea el PPI de densidad de píxeles, mayor será la resolución de la pantalla y más fina será la visualización de la pantalla. La razón por la que una pantalla Retine es más clara que una pantalla normal es porque su densidad de píxeles es varias veces mayor que la de una pantalla normal.
Por ejemplo: pantalla de iPhone de 3,5 pulgadas
El tamaño de pantalla al que nos referimos a diario en realidad se refiere a la longitud diagonal de la pantalla. Para calcular la densidad de píxeles, primero es necesario calcular los píxeles diagonales equivalentes de la pantalla del dispositivo y dividirlos por la longitud diagonal. Por ejemplo, el HTC G7 tiene una resolución de 480x800, 3,7 pulgadas y una densidad de píxeles calculada de 252 PPI.
Densidad de píxeles PPI = la raíz cuadrada del ancho del píxel cuadrado más la altura del píxel cuadrado, dividida por el número de pulgadas en diagonal a lo largo de la pantalla.
La densidad determina la proporción
Al calcular el PPI de densidad de píxeles, puede saber a qué rango de densidad pertenece la pantalla del dispositivo, porque diferentes rangos de densidad corresponden a diferentes proporciones de escala predeterminadas.
En términos generales, la ventana gráfica es el área utilizada para mostrar la página en el navegador. En otras palabras, el ancho real del navegador es diferente del ancho del teléfono móvil. el ancho es 320 px o 640 px, navegando en el teléfono móvil El ancho interno del navegador siempre será la ventana gráfica del propio navegador.
Los navegadores modernos proporcionarán un valor predeterminado para su propia ventana gráfica, y la mayoría de ellos serán 980 px o 1024 px. En términos generales, la ventana gráfica del móvil es más grande que la pantalla del móvil de forma predeterminada, por lo que cuando la página se muestra normalmente en un navegador de escritorio, el área principal se diseñará a 960 px. Cuando se coloca en el lado móvil, aparecerá una barra de desplazamiento horizontal, por lo que se diseñará una página móvil especialmente para el navegador.
Los navegadores móviles colocarán la página en una ventana virtual. Por lo general, esta ventana virtual será más ancha que la pantalla, por lo que no es necesario comprimir cada página en una ventana pequeña para evitar romper el diseño. En las páginas web que no están optimizadas para navegadores móviles, los usuarios pueden desplazarse o hacer zoom para ver diferentes partes de la página.
La ventana gráfica de la página es un área dibujable. Aunque el área visible de la ventana gráfica coincide con el tamaño de la pantalla, la página de la ventana gráfica tiene su propio tamaño, que se utiliza para determinar el número de píxeles en la página. página.
El navegador basado en WebKit en las plataformas iPhone y Android utiliza una ventana gráfica o tamaño lógico de 980 píxeles de ancho, lo que equivale a ancho=980 px en la ventana gráfica. Cuando se carga una página, el contenido de la página generalmente se escala completamente para que toda la página sea visible, aunque el contenido se escala muy pequeño y es ilegible.
En la página web, los parámetros relevantes se pueden obtener dinámicamente a través de JS.
Según los principales terminales móviles actuales del mercado, tras contar los píxeles independientes del dispositivo, los tamaños recomendados del borrador de diseño del móvil H5 son 640 x 1136 y 750 x 1334.
A excepción de la visualización del navegador en pantalla completa, una barra de estado superior y una barra de navegación estarán presentes en casi todos los casos. Según los estándares del iPhone, las alturas de píxeles independientes de la barra de estado y la barra de navegación son 40 px y 88 px respectivamente. La plataforma Android puede cambiar el estado y la altura de la barra de navegación, y prevalecerán los valores predeterminados 48px y 100px. En una página web, el contenido de la página se comprimirá hacia abajo en el área ciega. Dependiendo del método de diseño, es posible que se exprima fuera de la ventana gráfica, es decir, debajo del área visible.
Entonces tome el valor máximo de 148 entre las dos plataformas. Por lo tanto, el borrador del diseño debe intentar garantizar que no haya contenido importante en una sola página. Si desea mostrar contenido importante completamente en todas las pantallas, debe prestar atención a las pantallas pequeñas del mercado. La resolución de la mayoría de los teléfonos inteligentes es superior a 640 x 960, siempre que el contenido importante se coloque encima de las persianas. área, es suficiente. La altitud más segura calculada es 812 = 960 - 148.
En pocas palabras, la ventana gráfica es estrictamente igual a la ventana del navegador. En los navegadores de escritorio, la ventana gráfica tiene el ancho y el alto de la ventana del navegador. Sin embargo, en los dispositivos móviles, la ventana gráfica es demasiado estrecha. , para mejor Sirve el diseño CSS, por lo que proporciona dos ventanas gráficas, a saber, la ventana gráfica visible Visual Viewport y la ventana gráfica de diseño Layout Viewport.
Si el área de visualización del navegador del dispositivo móvil está configurada en Viewport, algunos sitios web se mostrarán de forma errática porque la Viewport es demasiado estrecha, por lo que el navegador configurará la Viewport en un valor más amplio de forma predeterminada. como 980px, para que los sitios web diseñados para navegadores de escritorio también puedan mostrarse normalmente en navegadores de dispositivos móviles. La ventana gráfica predeterminada de este navegador es la ventana gráfica de diseño Vista de diseño. El ancho de la ventana gráfica de diseño se puede obtener utilizando document.documentElement.clientWidth de JavaScript. La ventana gráfica predeterminada en dispositivos móviles es Vista de diseño.
El ancho de la ventana gráfica de diseño es mayor que el ancho del área visible del navegador, por lo que se necesita una ventana gráfica para representar el tamaño del área visible del navegador. Esta ventana gráfica es la ventana gráfica visible. La ventana gráfica puede utilizar document.documentElement.innerWidth de JavaScript para obtenerlo.
Ideal Viewport es una ventana gráfica que se puede adaptar perfectamente a dispositivos móviles. En primer lugar, todo el contenido de la página se puede ver normalmente sin hacer zoom ni barras de desplazamiento horizontales. En segundo lugar, el texto y las imágenes mostrados tienen el tamaño adecuado. . Por ejemplo, el texto de 14 píxeles no aparecerá demasiado pequeño ni ilegible en una pantalla con alta densidad de píxeles. No importa la densidad de la pantalla ni la resolución, el tamaño mostrado es casi el mismo. Esta ventana gráfica también es la ventana gráfica ideal.
Ideal Viewport no tiene un tamaño fijo y diferentes dispositivos tienen diferentes tamaños. Por ejemplo, en dispositivos iPhone, el ancho ideal de la ventana gráfica es 320 píxeles, independientemente de si el ancho de la pantalla es 320 o 640. La importancia de Ideal Viewport es que, sin importar la resolución, las páginas diseñadas para Ideal Viewport se pueden presentar perfectamente a los usuarios sin necesidad de hacer zoom ni barras de desplazamiento horizontal.
La ventana gráfica predeterminada en dispositivos móviles es Layout Viewport y se requiere Ideal Viewport al desarrollar páginas para dispositivos móviles. Para obtener una ventana gráfica perfecta, debe configurar la metaetiqueta.
La función de esta metaetiqueta es hacer que el ancho de la ventana gráfica actual sea igual al ancho del dispositivo, sin permitir al usuario hacer zoom manualmente. La escala mínima = 1,0 y la escala máxima = 1,0 no son necesarias. Pero ancho = ancho del dispositivo es necesario para garantizar que no aparezcan barras de desplazamiento horizontales.
ancho puede controlar el ancho de la ventana gráfica de diseño predeterminado. Si no se especifica, el valor predeterminado será 980 px o 1024 px. Este valor lo determinará el propio dispositivo. Cuando el ancho de la ventana gráfica de diseño se establece en el ancho del dispositivo móvil ancho = ancho del dispositivo, la ventana gráfica de diseño se convertirá en una ventana gráfica perfecta.
De hecho, para establecer el ancho de la ventana gráfica actual al ancho perfecto, puede establecer ancho = ancho del dispositivo o establecer escala inicial = 1.0, pero configurar ancho = ancho del dispositivo por sí solo hará que el iPhone El dispositivo iPad no distingue entre pantallas horizontales y verticales. Simplemente configurar la escala inicial = 1.0 hará que las pantallas horizontales y verticales en IE se vuelvan indiferentes. Por lo tanto, el ancho de ventana perfecta de la pantalla vertical se utiliza como estándar. La forma más perfecta de escribirlo es escribir ancho = ancho del dispositivo para resolver los defectos de iPhone y iPad, y escala inicial = 1.0 para resolver los defectos. de IE.
CSS3 agrega nuevas unidades de ventana gráfica vm y vh, que son compatibles con los terminales móviles iOS8+ y Android4.4+.
La proporción de píxeles del dispositivo define la correspondencia entre los píxeles físicos y los píxeles independientes del dispositivo. La fórmula de cálculo es: proporción de píxeles del dispositivo = píxeles físicos/píxeles independientes del dispositivo.
En CSS, las consultas de medios se pueden realizar de las siguientes maneras para adaptar los estilos a diferentes dispositivos DPR.
En JavaScript, puede obtener el DPR del dispositivo actual a través de window.devicePixelRatio.
En la pantalla de un dispositivo Ratina HD, un píxel CSS corresponde a 4 píxeles físicos
Después de configurar la ventana gráfica en la página web, la página y la pantalla se muestran en una proporción de 1:1 y todos los dispositivos móviles tienen píxeles de dispositivo. En comparación con DPR, cuando DPR = 2, un píxel CSS en el dispositivo móvil consta de 4 píxeles físicos.
El cliente de Android restringe el atributo de zoom establecido por la ventana gráfica. Es suficiente permitir que el cliente relaje la restricción. Sin embargo, dado que la versión de la aplicación en el mercado aún no lo admite, es necesario realizar un procesamiento de compatibilidad. hecho.
Hay una barra de desplazamiento de 1 px en el iPhone6. La solución final es agregar 0,1 al valor de escala máxima en la ventana gráfica. Dado que user-scalable=no está configurado, agregar 0,1 al valor de escala máxima. no funciona ¿Qué impacto tendrá?
Obtenga dinámicamente la proporción de píxeles del dispositivo móvil a través de JS y utilice la proporción de píxeles del dispositivo para calcular y establecer el tamaño de fuente, el tamaño de fuente y la proporción de escala de la etiqueta html en la página web.
Por ejemplo: establezca dinámicamente el tamaño de fuente de html y ajuste el valor de zoom de la página de acuerdo con el DPR del dispositivo para lograr efectos de alta definición.
El nombre completo de rem es el tamaño de fuente del elemento raíz, que se refiere a la unidad relativa del tamaño de fuente en relación con el elemento raíz. Las reglas de cálculo dependen del elemento raíz.
rem se adapta a través del elemento raíz. El elemento raíz en la web se refiere a html, por lo que el tamaño de rem se puede controlar configurando el tamaño de fuente de html.
El núcleo del diseño REM es establecer el tamaño de fuente del elemento html raíz. Para evitar la borrosidad causada por píxeles insuficientes en una pantalla de alta definición, cuando obtiene el borrador del diseño móvil, el El borrador de diseño móvil generalmente se basará en el ancho del dispositivo iPhone 5 de 320 px o el ancho del dispositivo iPhone 6 de 375 px y creará un borrador de diseño que sea el doble de ancho, es decir, 640 px o 750 px.
Por ejemplo: establezca el tamaño de fuente: 10 px de la etiqueta html, 6rem es 6*10 px.
rem es adecuado para WebApp. Por razones de compatibilidad, el uso de rem en WebApp puede resaltar mejor el valor y la funcionalidad.
Control de consultas de medios mediante CSS
El borrador del diseño de la interfaz de usuario móvil utilizará el ancho del iPhone como estándar
Utilice JS para controlar el tamaño del texto de la página web para adaptarse a la pantalla
La esencia del uso del diseño rem es la escala proporcional, generalmente basada en el ancho.
Divida el ancho de la pantalla en 100 partes iguales y use x para representar el ancho de cada parte, es decir, x = ancho de la pantalla/100. Si se usa x como unidad, el valor delante de. x representa el porcentaje del ancho de la pantalla. Si desea que los elementos de la pantalla escalen proporcionalmente con el ancho de la pantalla, solo necesita determinar la unidad x, lo que se puede lograr mediante rem en CSS3. El tamaño de fuente HTML se puede establecer en el uno por ciento del ancho de la pantalla a través de JS.
Si el tamaño del ancho del borrador de diseño UE es 640 px y el ancho de un elemento en el borrador de diseño es 100 px, puede calcular 100/640 px * 100 px = 15,625.
Mejores prácticas: solución adaptativa de terminal móvil px2rem/imochen/hotcss
Rem no se puede utilizar para el tamaño de fuente, porque el tamaño de fuente y el ancho de fuente no están relacionados linealmente, por lo que el tamaño de fuente no se puede usado en retiro. Dado que establecer el tamaño de fuente del elemento raíz afectará a todos los elementos que no tienen un tamaño de fuente establecido, debido a que el tamaño de fuente se heredará, se puede realizar la corrección de fuente en el cuerpo.
Cómo hacer que la fuente responda, puede modificar el tamaño de la fuente del cuerpo y establecer el tamaño de la fuente usando unidades em.