|
La mayoría de los diseñadores nacionales prefieren usar px, mientras que la mayoría de las webs extranjeras prefieren usar em y rem, así que ¿cuál es la diferencia entre los tres y cuáles son las ventajas y desventajas de cada uno? Vamos a hacerte una introducción detallada. Características de PX: 1. IE no puede ajustar el tamaño de la fuente de quienes usan px como unidad; 2. La razón por la que la mayoría de los sitios extranjeros pueden ajustarse es que utilizan em o rem como unidades de fuente; 3. Firefox puede ajustar px, em y rem, pero más del 96% de los internautas chinos usan el navegador (o kernel) de IE. píxeles px. Unidades de longitud relativa. El pixel px es relativo a la resolución de pantalla del monitor. (Citado del manual CSS2.0) em es una unidad relativa de longitud. Tamaño de fuente relativo al texto dentro del objeto actual. Si el tamaño de la fuente del texto en la línea no está configurado artificialmente, será relativo al tamaño de fuente predeterminado del navegador. (Citado del manual CSS2.0) La altura de fuente por defecto para cualquier navegador es 16px. Todos los navegadores sin ajustar cumplen: 1em=16px. Luego 12px=0,75em, 10px=0,625em. Para simplificar la conversión de tamaño de fuente, tienes que declarar font-size=62,5% en el selector de cuerpo en css, lo que hace que el valor em sea 16px*62,5%=10px, de modo que 12px=1,2em, 10px=1em, lo que significa que solo tienes que dividir tu valor px original por 10, y luego reemplazarlo por em como unidad. Características de EM: 1. El valor de em no es fijo; 2. Em hereda el tamaño de fuente del elemento padre. Así que cuando escribimos CSS, debemos prestar atención a dos cosas: 1. Declarar tamaño de fuente=62,5% en el selector de cuerpo; 2. Divide tu valor px original entre 10 y reemplázalo por em como unidad; 3. Recalcular los valores em de esas fuentes ampliadas. Evita declaraciones repetidas sobre el tamaño de la fuente. Es decir, para evitar el fenómeno de 1,2 * 1,2 = 1,44. Por ejemplo, si declaras el tamaño de fuente de 1,2em en #content, al declarar el tamaño de fuente de p, solo puede ser 1em, no 1,2em, porque este em no es ese em, y se convierte en 1em=12px porque hereda la altura de fuente de #content. Características REM rem es una nueva unidad relativa (raíz em) añadida a CSS3, que ha atraído mucha atención. ¿Cuál es la diferencia entre esta unidad y la em? La diferencia es que cuando usas rem para establecer el tamaño de fuente de un elemento, sigue siendo el tamaño relativo, pero el relativo es solo el elemento raíz HTML. Se puede decir que esta unidad combina las ventajas del tamaño relativo y el tamaño absoluto, mediante las cuales no solo puede modificar solo el elemento raíz para ajustar proporcionalmente todos los tamaños de fuente, sino también evitar la reacción en cadena de compuestos de tamaños de fuente capa por capa. Actualmente, rem está compatible con todos los navegadores excepto IE8 y anteriores. Para navegadores que no lo soportan, la respuesta también es muy sencilla, que consiste en escribir una sentencia unidad absoluta. Estos navegadores ignoran el tamaño de fuente configurado con rem. Aquí tienes un ejemplo: p {font-size:14px; tamaño de fuente: .875rem; } Nota:La elección de las unidades de fuente depende en gran medida de tu proyecto, y si tu base de usuarios usa la última versión del navegador, entonces se recomienda REM; si la compatibilidad es un problema, usa px, o ambos. Aquí tienes la dirección de la herramienta de conversión de unidades px, em, rem:http://pxtoem.com/
| 
Publicado en 21/3/2017 9:31:50
|
|
|
