En esta era de cientos de visualizaciones, los diseñadores web a menudo necesitan considerar la experiencia de navegación de diferentes clientes.
El tamaño del texto es una parte importante de la experiencia del usuario. Diferentes resoluciones, diferentes tamaños de monitor, diferentes DPI e incluso diferentes configuraciones del navegador tendrán un impacto en el tamaño final del texto mostrado. Aunque muchos navegadores ahora pueden ampliar fácilmente la página, siempre resulta problemático para los usuarios volver a ampliarla cada vez que la visitan, sin mencionar que muchos usuarios no saben cómo ampliar la página. Es mejor ofrecer a los usuarios un tamaño de fuente predeterminado más considerado según su resolución. Entonces, ¿cuál es el tamaño apropiado para este tamaño de fuente?
¿12px? ¿14px? ¿15px? ¿16px? ¿O no deberíamos usar la unidad px?
La raíz del problema es que todas las unidades de tamaño de fuente (px, pt, em) en la pantalla son unidades relativas y por sí solas no pueden determinar el tamaño real del texto. Es más, la percepción fundamental que tienen las personas del tamaño del texto depende de la perspectiva de los ojos, que no sólo depende del tamaño físico del texto, sino que también depende de su distancia al ojo humano.
tamaño físico
Primero, supongamos un tamaño de texto físico que queremos lograr, por ejemplo, establecido en 16 píxeles en un monitor de 1280 * 1024 de 17 pulgadas. Calculado, su altura es de aproximadamente 4,32 mm. Planeamos hacer que el texto web se acerque a esto en la mayoría de los monitores. tamaño, entonces ¿qué tamaño de fuente debería mostrarse en diferentes resoluciones?
Paso 1: cuente la resolución principal del usuario y el tamaño de pantalla correspondiente.
Para convertir entre tamaño físico y resolución, primero cuente la resolución y el tamaño de pantalla correspondiente. La distribución de las resoluciones de los usuarios se puede obtener de los registros estadísticos del sitio web. Dado que cada configuración de resolución puede corresponder a varias pantallas de diferentes tamaños, y el tamaño de la pantalla no se puede obtener a través de la página web, tenemos que realizar un análisis estadístico del mercado actual de monitores: para una determinada resolución, contar los posibles rangos de tamaño de pantalla, desde el más pequeño hasta el tamaño más grande y relativamente común (o use el medio del rango como tamaño principal). Como se muestra en la siguiente imagen——
Mercado de monitores de computadora (hay muchos tipos de productos y es inevitable que uno se lo pierda, los datos son solo de referencia)
Paso 2: Calcule el ancho físico de los tamaños de pantalla convencionales para cada resolución
Las relaciones de aspecto de los monitores actuales incluyen no sólo pantallas estándar 4:3, pantallas panorámicas 16:10, sino también relaciones más irregulares. Para comparar monitores con diferentes relaciones de aspecto, se utilizan resoluciones horizontales para las estadísticas. Utilice el tamaño y la relación de aspecto convencionales (suponiendo que la longitud y el ancho de los píxeles sean iguales) para calcular el ancho de la pantalla (pulgadas) y luego conviértalo a sistema métrico (milímetros). Al hacerlos coincidir uno a uno, podrá ver el tamaño. tendencia del tamaño de la pantalla. Combinado con la distribución del usuario de cada resolución, los resultados se muestran en la siguiente figura (cada punto de la imagen corresponde a una resolución, el eje horizontal es el número de píxeles en la dirección horizontal de la pantalla, el eje vertical es el ancho físico de la pantalla y el tamaño de la burbuja indica el uso de esta resolución. El número de usuarios. La burbuja azul indica pantalla estándar y la violeta indica pantalla ancha): las tres burbujas más grandes son 1024*768, 1280*1024 y. 1280*800.
Paso 3: Calcula el tamaño de fuente en diferentes monitores
Divida el ancho físico de la pantalla por el ancho de píxel para obtener el ancho de cada píxel. Luego divida este número por el tamaño físico especificado del texto para obtener el tamaño de fuente requerido en diferentes resoluciones. Por ejemplo, para mostrar texto cuadrado de 4,32 mm, se requieren los siguientes tamaños de fuente en cada resolución (calculados por separado para computadoras portátiles y de escritorio):
Tamaños de fuente requeridos en diferentes resoluciones
Se puede ver que los tamaños de las computadoras portátiles y de escritorio son muy diferentes. Por conveniencia, se utiliza el tamaño principal o el tamaño promedio de cada resolución para calcular el tamaño de fuente requerido para el tamaño de fuente especificado en cada resolución. (La siguiente imagen elimina las resoluciones que básicamente solo se usan en portátiles), tomando como ejemplos 4,32 mm, 3,77 mm y 3,25 mm (fuentes de tamaño 16, 14 y 12 con una resolución de 1280*1024 de 17 pulgadas):
Para mantener un tamaño físico fijo, la relación entre el tamaño de fuente requerido y la resolución en cada pantalla principal
Dado que algunas fuentes chinas no se muestran bien en números no pares cuando el tipo claro no está activado, generalmente se recomienda utilizar números pares como 12, 14, 16, 18 y 22 píxeles. Es decir, seleccione el número par más cercano para una determinada resolución. Por ejemplo: 14px se usa para resoluciones horizontales de pantalla inferiores a 1100, 16px se usa para 1100 a 1500, 18px se usa para pantallas superiores a 1500, y así sucesivamente.
distancia al ojo humano
Aunque el tamaño de fuente de las computadoras portátiles es mucho más pequeño que el de las computadoras de escritorio, en realidad no nos trae tantos inconvenientes. Esto se debe a que la distancia entre el ojo humano y la pantalla es generalmente menor cuando se usan computadoras portátiles que cuando se usan computadoras de escritorio. Cuando los netbooks se vuelven cada vez más pequeños (el ejemplo extremo son los teléfonos móviles), la gente puede acercarlos cuando los usan, de modo que el ángulo de visión sea mayor. Por el contrario, cuando la pantalla se hace cada vez más grande (24 pulgadas o incluso más), debido a consideraciones como el ángulo de visión general, las personas también pueden alejarse más de la pantalla, reduciendo así el ángulo de visión.
Hablando cuantitativamente: dado que el tamaño del texto h (4 ~ 5 mm) es muy pequeño en relación con la distancia d (30 ~ 60 cm) entre el ojo humano y el texto, se puede considerar aproximadamente que el ángulo de visión θ es proporcional a h e inversamente proporcional a d (θ≈tgθ=h/ d). En otras palabras, el texto del mismo tamaño solo aparecerá la mitad del tamaño cuando esté a dos pies de distancia.
En otras palabras, el monitor sólo puede transmitir un tamaño aproximado, y cada usuario seguirá ajustando el efecto real que ve ajustando inconscientemente la distancia a la pantalla durante operaciones específicas. Frente a cada vez más usuarios de computadoras portátiles (consulte el artículo anterior: Cuota de mercado de computadoras portátiles), los diseñadores front-end solo pueden proporcionar un efecto de página basado en el tamaño promedio de las computadoras portátiles y de escritorio, y depende de los usuarios adaptarse.
Utilice JS para ajustar automáticamente el tamaño de fuente en diferentes resoluciones
Por ejemplo, la identificación del div donde se encuentra el cuerpo de la página web es contenido——
Nota: Para garantizar que el texto se pueda escalar en cada navegador, la unidad de tamaño de fuente usa em en lugar de px. En términos generales, el navegador tiene por defecto 1em = 16px y 0.875em1em1.125em es 1416. 18 píxeles.
Tenga en cuenta al utilizar la escala del tamaño de fuente: es mejor usar porcentajes en lugar de tamaños de fuente fijos para unidades de tamaño de fuente, como títulos dentro del div, para que se puedan escalar sincrónicamente con el texto.
Adjunto: Los principales datos citados en los cuadros de este artículo.
Publicado por primera vez en este sitio: http://www.mhzx1.com