font - rem size html css

Aplicación receptiva: las unidades de tamaño de fuente em vs. px vs. pt vs. porcentaje

Question

Estoy creando una aplicación receptiva dirigida a computadoras de escritorio, tabletas y teléfonos móviles con HTML y CSS, pero no estoy segura de qué tamaño de fuente de la unidad debería usar, ya que la fuente se adapta bien a cualquier tamaño de pantalla. ¿Cuál es la diferencia entre em, px, pt y porcentaje? ¿Cuál es la mejor opción para mí?

Me gustaría escuchar experiencias reales al respecto en aplicaciones receptivas para computadoras de escritorio, tabletas y teléfonos móviles.

Estaría agradecido por cualquier ayuda!

Answer 1

Es posible que desee echar un vistazo a este artículo: pequeño enlace .

Actualización: aquí hay una pequeña explicación sobre cómo se aplica esto en su caso:

• px : un píxel es un cuadrado pequeño (generalmente) en la pantalla de su dispositivo que puede mostrar solo un color a la vez. La resolución de su pantalla especifica la cantidad de píxeles de los que está compuesta su pantalla / pantalla. Así que cuando especifique: font-size: 12px; Básicamente, le está diciendo al navegador que cada letra debe tener 12 píxeles de altura (aproximadamente, letras diferentes varían en altura un poco, pero la diferencia relativa se conserva).
• porcentajes : font-size: 50%; establece el tamaño de fuente de su elemento al 50% del tamaño de fuente de su elemento principal.
• pt : 1pt punto (punto) es 1pt de pulgada. Configuración font-size: 12pt; establece la altura de tus personajes en 12/72 pulgadas (de nuevo, diferentes personajes difieren un poco).
• em : em es el ancho de la letra ''m'' en el tipo de letra seleccionado, básicamente el mismo porcentaje, excepto que 1em es 100% y 1.5em es 150% .

Por lo tanto, su elección probablemente sea px ya que preservaría las proporciones lógicas del tamaño del texto a otros elementos de tamaño.

Answer 2

Intente usar una mezcla de px, em y rem.

Chris Coyier explica en esta publicación que, al utilizar px para su documento, rem para sus módulos (es decir, secciones de su página) y em para elementos de texto dentro de sus módulos, la página se ampliará de manera clara.

Answer 3

Me parece que lo mejor serán las unidades rem y vmin entrantes como se documenta aquí .

Para hacer frente a un navegador más antiguo, es posible que desee definir algunos cambios de CSS como:

p, li
{
  font-size: 12px;
  font-size: 0.75rem;
}

o

p, li
{
  font-size: 12px;    /* old */
  font-size: 1.2vm;   /* IE9 */
  font-size: 1.2vmin;
}

(crédito a Craig Butler )

Answer 4

Varias dimensiones son

1. "Ems" (em) : El "em" es una unidad escalable. Un em es igual al tamaño de fuente actual, por ejemplo, si el tamaño de fuente del documento es 12pt, 1em es igual a 12pt. Los ems son de naturaleza escalable, por lo que 2em sería igual a 24pt, .5em sería igual a 6pt, etc.
2. Porcentaje (%) : la unidad porcentual es muy parecida a la unidad "em", salvo por algunas diferencias fundamentales. En primer lugar, el tamaño de fuente actual es igual al 100% (es decir, 12 puntos = 100%). Mientras usa la unidad de porcentaje, su texto permanece completamente escalable para dispositivos móviles y para accesibilidad.
3. Píxeles (px): los píxeles son unidades de tamaño fijo que se utilizan en medios de pantalla (es decir, para leer en la pantalla de la computadora). Un problema con la unidad de píxeles es que no se escala.
4. Puntos (pt): los puntos se usan tradicionalmente en medios impresos (cualquier cosa que se imprima en papel, etc.). Un punto es igual a 1/72 de pulgada. Los puntos son muy parecidos a los píxeles, ya que son unidades de tamaño fijo y no pueden escalar en tamaño.
5. Unidades de vista : - Son relativas al puerto de vista. Son nuevos en CSS3.
   1. 3.2vw = 3.2% del ancho de la ventana gráfica
   2. 3.2vh = 3.2% de la altura de la vista
   3. 3.2vmin = Menor de 3.2vw o 3.2vh
   4. 3.2vmax = Mayor de 3.2vw o 3.2vh

vea kyleschaeffer.com/.... y css-tricks.com/....

Pero para lograr un tipográfico de respuesta, visite https://.com/a/21981859/406659