px son específicos, se explican por sí mismos: si dices que algo será 1px, será 1px. Esto puede causar problemas, especialmente con un diseño receptivo. A menudo, se espera que los sitios web funcionen en computadoras de escritorio, tabletas y dispositivos móviles: si el tamaño es fijo, digamos, a 960 píxeles de ancho, también se mantendrá así en tamaños más pequeños.
Además, las resoluciones de pantalla han aumentado: solía ser común encontrar texto establecido en 12px o incluso 10px. A baja resolución, esto generalmente está bien. En resoluciones modernas más altas, el texto es pequeño e ilegible.
Los tamaños porcentuales son relativos a su padre [directo], y para los elementos, generalmente son útiles para el ancho. Si un cuadro tiene un ancho del 100% [del tamaño de la pantalla] y establece que sus cinco hijos tengan un ancho del 20%, permanecerán 1/5 del ancho del padre, independientemente de qué tan grande sea la pantalla. Debido al tamaño heredado, el padre a menudo tiene que tener un tamaño explícitamente aplicado; si usa un%, en realidad tiene que ser un% de algo.
- Nodo js? Quiero aprender el lenguaje del lado del servidor, ¿debería comenzar con node.Js? (Sé javascript básico)
- Cómo ocultar el código fuente de mi página HTML
- ¿Es valioso un asociado en diseño gráfico cuando intenta convertirse en un desarrollador web front-end?
- ¿Por qué PHP no puede hacer un equivalente a socket.io? ¿Qué hay de mejor en JavaScript en ese aspecto?
- ¿Puede una persona de 60 años aprender HTML?
Los tamaños porcentuales son mucho menos útiles cuando se aplican a la altura de los elementos. Un documento en la web suele tener una altura variable: a medida que la pantalla se encoge o crece, el contenido vuelve a fluir. Se puede hacer (por ejemplo, establecer una altura del 100% en un elemento de bienvenida que desea ocupar toda la altura cuando un visitante llega al sitio), pero no es terriblemente útil.
Ems y rems se basan en el tamaño de fuente. Los ems son relativos al contexto actual del tamaño de fuente, mientras que los rems son relativos al tamaño de fuente raíz. Entonces, si su tamaño de fuente básico es 16px, eso es 1em. A partir de eso, 2em equivaldría a 32px, 0.5em a 8px, etc.
La gran diferencia entre los dos es el contexto. Entonces, digamos que tenemos un documento muy simple con un DOM que dice:
cuerpo
El |
ul
El |
li —li
El |
ul
El |
li —- li
Establece el tamaño de fuente en el cuerpo en el navegador predeterminado, 16px. Esto es 1em. Desea que los elementos de la lista sean un poco más pequeños, por lo que establece todos los elementos de la lista en 0.5em. Los elementos de la lista superior tendrán un tamaño de 8 px. Sin embargo, el siguiente nivel de elementos li será 0.5 * el padre, entonces 0.5 * 8px = 4px.
Si usa rems, esto cambia: dado que los rems se basan en el valor raíz en lugar del valor principal, establecer los elementos de la lista en 0.5rem significa que todos los elementos de la lista permanecen en 8px; siempre será 0.5 * 16px.
Esencialmente, ambos funcionan igual que%, pero específicos para el tamaño de fuente. Ambos son muy útiles. Los Rems son buenos para establecer tamaños de fuente generales, ems para ajustes dentro de bloques de texto que deben ser relativos al tamaño actual (el superíndice / subíndice es un buen ejemplo).
También hay unidades ex y ems: funcionan igual, excepto que ex se refiere a la altura x de la fuente (la altura de una x minúscula). El w3 da un caso de uso específico, nunca lo he usado ni lo he visto usado en ningún lado.
vh (altura de ventana) y vw (ancho de ventana) son relativos al tamaño de la ventana actual, por ejemplo, 1vh es el 1% de la altura, 100vw es el 100% del ancho. Esto sería increíblemente útil, pero el soporte no es excelente, en particular, los navegadores webkit no lo calculan dinámicamente, lo que significa que debe actualizar la página si se cambia el tamaño. Deben (con total compatibilidad) ser aplicables también a los tamaños de fuente, para que pueda
Hay dos unidades asociadas, vmin (que se aplica a la menor de las dos) y vmax (mayor de las dos): ¿un caso de uso podría estar cambiando la orientación de un teléfono, tal vez? No estoy seguro de que sean particularmente útiles.
mm, cm y pulgadas no tienen sentido en la web, pero son muy útiles para imprimir hojas de estilo si sabe cuál será el formato de salida (US o ISO). Los puntos (pt) y Pica (pc) también están disponibles, son unidades del tipógrafo, de nuevo, absolutos y sin sentido en la web.
