1. Introducción de la unidad PX \ EM \ PT
El nombre de la unidad px es píxel, la unidad de longitud relativa, píxel (px) es la recomendación nacional relativa a la resolución de pantalla del monitor;
El nombre de la unidad em es una unidad de longitud relativa. En comparación con el tamaño de fuente del texto en el objeto actual, se usa más en el extranjero;
El nombre de la unidad pt es Punto . La unidad de longitud absoluta generalmente usa la unidad de tamaño de longitud en la versión anterior de la tabla, pero básicamente no se usa ahora.
Breve introducción de la unidad html:
Px pixel Pixel ; unidad de longitud relativa.
Pt point ( Point ); unidad de longitud absoluta
Em unidad de longitud relativa, donde em y html <em> etiqueta "EM" se escribe igual, y aquí em como una unidad de texto separada.
1. En el pasado, IE no podía ajustar el tamaño de fuente de aquellos que usaban px como unidad, pero ahora casi IE admite el uso de PX como unidad aquí;
2. La razón por la que la mayoría de los sitios web extranjeros pueden ajustarse es que utilizan em como unidad de fuente;
3. Firefox puede ajustar px y em , pero más del 96% de los internautas chinos usan el navegador IE (o kernel).
px píxeles (Pixel) . Unidad de longitud relativa. El píxel px es relativo a la resolución de pantalla del monitor, y las capturas de pantalla QQ también usan PX como la unidad de largo y ancho.
em es una unidad de longitud relativa. Relativo al tamaño de fuente del texto en el objeto actual. Si el tamaño de fuente actual del texto en la línea no se ha configurado manualmente, es relativo al tamaño de fuente predeterminado del navegador.
Caso de comparación de dos unidades html
1. Un ejemplo sencillo:
Width:300px //宽度为300像素
Width:300pt //宽度为300点
Width:300em //宽度为300相对长度
以上我们设置相同数值的不同单位实例2. Establezca unidades de longitud em px pt diferentes para que el texto vea el efecto:
Código CSS:
.Hello-px{ font-size:66px}
.Hello-pt{ font-size:66pt}
.Hello-em{ font-size:6em}
Código HTML:
<div class="Hello-px">Hello</div>
<div class="Hello-pt">Hello</div>
<div class="Hello-em">Hello</div>3. Diagrama de comparación de la longitud de la unidad
Conversión de tres, em y px
La altura de la fuente por defecto de cualquier navegador es 16px ( 16 píxeles). Todos los navegadores no ajustados cumplen con: 1em = 16px . Entonces 12px = 0.75em, 10px = 0.625em . Para simplificar la conversión de font-size , debe declarar font-size = 62.5% en el selector de cuerpo en css , lo que hace que el valor em 16px * 62.5% = 10px , de modo que 12px = 1.2em , 10px = 1em , también Es decir, solo necesitas dividir tu valor de px original por 10 , y luego reemplazarlo con em como unidad.
12px equivale a 9pt de longitud;
12px equivale a 0,75em de longitud;
9pt equivale a 0,75em de longitud;
Generalmente usamos em para convertir px más
Conversión avanzada entre em y px:
Tiempo de uso específico:
Inicialmente declaramos font-size = 62.5% para todas las etiquetas html
Tal como:
*{font-size=62.5%}Luego, el diseño detrás de esto se puede configurar de acuerdo con las siguientes técnicas para configurar la unidad em
font-size:1.2em等于font-size:12px
font-size:1.4em等于font-size:14pxLa analogía es equivalente al tamaño de fuente inicial = 62.5% , la unidad de em y px es solo 10 veces la diferencia, por lo que es conveniente calcular y establecer el valor de longitud de em .
4. La unidad em tiene las siguientes características:
1. El valor de em no es fijo;
2. El em heredará el tamaño de fuente del elemento padre.
Si queremos usar em como unidad al escribir CSS, debemos prestar atención a dos puntos:
1. Declare Font-size = 62.5% en el selector de cuerpo ;
2. Divida su valor px original por 10 y reemplácelo con em como unidad;
3. Vuelva a calcular los valores em de esas fuentes ampliadas . Evite las declaraciones repetidas de tamaño de fuente.
Eso es para evitar el fenómeno de 1,2 * 1,2 = 1,44 . Por ejemplo, si declara un tamaño de fuente de 1.2em en #content , entonces el tamaño de fuente declarado solo puede ser 1em , no 1.2em , porque este em no es ese em, y cambia debido a la altura de la fuente que hereda # contenido para 1em = 12px .
Sin embargo, la excepción de los caracteres chinos de 12px es que los caracteres chinos de 12px (1.2em) obtenidos por el método anterior no son iguales al tamaño de fuente definido directamente con 12px en IE , pero son un poco más grandes. Para resolver este problema, simplemente cambie 62.5% a 63% en el selector de cuerpo para que se muestre normalmente. La razón puede ser que cuando IE procesa caracteres chinos, la precisión de los valores de coma flotante es limitada.