El conocimiento de las hojas de estilo en cascada (CSS) es una parte esencial del arsenal de cualquier desarrollador web. CSS le permite diseñar y modificar código HTML, incluido el código dentro de los temas de WordPress.
Cuando se trata de utilizar CSS, existe una amplia gama de “propiedades” como márgenes, tamaño de fuente, etc. Para modificar esas propiedades, usaría unidades CSS para sitios web compatibles con varios navegadores. Estas unidades se pueden utilizar para todo, desde el tamaño de la fuente hasta el posicionamiento.
En esta publicación, veremos 16 unidades distintas de ventana gráfica absoluta, relativa y en CSS y cómo funcionan.
Vamos a sumergirnos.
¿Qué son las unidades CSS y cómo funcionan?
Las unidades CSS le permiten modificar el diseño de un sitio web, por lo que es importante comprender cómo funcionan. Hay tres tipos diferentes de unidades CSS:
- Unidades absolutas: px, pt, PC, pulgadas, cm, mm
- Unidades relativas: em, rem, %, ex, ch, fr
- Unidades de ventana gráfica: VW, vh, vmin, vmax
Echemos un vistazo más a fondo a cada uno.
Unidades absolutas
Empecemos por las unidades más básicas. Las unidades absolutas solo deben usarse en partes específicas del diseño del sitio web o al imprimir.
Las unidades absolutas más comunes son:
1. Píxeles (px)
A píxel es la unidad de medida más pequeña en diseño digital. Los píxeles son lo que son las pulgadas en el diseño de impresión tradicional. Un píxel se puede definir como 1/96 de pulgada.
Esta unidad está diseñada específicamente para CSS. Su valor depende de la resolución de la pantalla, lo que afecta el tamaño de los píxeles de la pantalla. Por ejemplo, si tiene dos pantallas con diferentes tamaños, pero ambas tienen la misma resolución, los píxeles se verán similares en ambas pantallas.
Si bien el píxel CSS no es lo mismo que un píxel físico, está lo suficientemente cerca como para que podamos usarlo para realizar mediciones.
2. Puntos (pt) y picas (pc)
A continuación, tenemos puntos y picas. Estas unidades todavía se utilizan en el diseño de impresión, pero poco a poco están siendo reemplazadas por píxeles. Aunque actualmente no son muy populares en el mundo virtual y real, se remontan al tipo de letra y se usan principalmente con cosas como el tamaño de fuente.
Un punto es 1/72 de pulgada y una pica es 1/6 de pulgada.
3. Pulgadas (pulg), centímetros (cm) y milímetros (mm)
Estas tres unidades son similares y se utilizan para medir cosas en el mundo real. Son más adecuados para diseñar su sitio web para que se vea bien cuando está impreso en lugar de cuando se ve en una pantalla. Se aseguran de que los componentes, diseños, espacios y tipos de letra sean perfectos para cada usuario de la aplicación en línea.
Sin embargo, la desventaja de estas unidades es que diferentes dispositivos pueden tener diferentes tamaños y densidades de pantalla, lo que afecta la forma en que las personas ven su sitio web. Por ejemplo, un sitio web visto en un dispositivo móvil tendrá un aspecto diferente al de la versión de escritorio.
Por este motivo, es posible que desee utilizar otras unidades relativas en lugar de absolutas para garantizar que todos tengan una buena experiencia en su sitio web.
Unidades relativas
Ahora que hemos cubierto las unidades absolutas, es hora de abordar las relativas. Las unidades relativas facilitan el diseño responsivo para la necesidad cada vez mayor de interfaces adaptables.
1. Porcentaje (%)
Comencemos con la unidad relativa más conocida, la porcentaje. Todo lo que se representa en CSS con esta unidad es relativo a:
- El padre (el elemento contenedor que encierra los elementos 'secundarios') que está conectado a
- Cuando un elemento hijo tiene una posición establecida como absoluta, el último elemento padre con posicionamiento relativo determinará su posición.
- El elemento raíz (elemento de nivel superior del que descienden todos los demás elementos) cuando la posición se establece en “fija”.
Hay algunas cosas a tener en cuenta al establecer el ancho o alto de un elemento en un valor porcentual. Por ejemplo, si configura el ancho o el alto en “automático” o no lo configura en absoluto, es posible que no funcione correctamente. Pero cuando todo está configurado correctamente, para configurar las dimensiones de contenedores grandes, elementos que están en lo alto o elementos que ocupan toda la página.
2. Ex/Ch
A continuación, tenemos ex y chunidades específicas que sólo son útiles cuando se trata de fuentes monoespaciadas.
Ex es relativo a la altura de la letra x en la fuente actual. Ch es relativo al ancho de la letra 0 en la fuente actual. Entonces ambas son medidas del tamaño de un personaje, ya sea en el eje x o y. Y sí, estas medidas se ven afectadas por el tamaño de fuente de un elemento.
Deberá ajustar manualmente las fuentes de los títulos y símbolos para que sean fáciles de detectar, leer y reconocer. Debido a que los tipos de letra estándar tienen caracteres de diferentes alturas y anchos, tendrás que tener un caso de uso muy especializado para estas unidades o usar una fuente monoespaciada y diseñar tus documentos con ella (por ejemplo, un editor de código en línea o algo así).
Si bien la ex y otras unidades relativas son compatibles con la mayoría de los dispositivos, ch no es tan buena, aunque todavía funciona casi el 98% del tiempo.
3. Padre
fr es una nueva unidad CSS que representa una fracción del espacio libre de un contenedor. Es relativo a la cantidad de espacio que queda después de colocar otros elementos.
Esto puede resultar útil porque le permite asignar espacio para diferentes elementos según el espacio disponible. La unidad fr es compatible con los principales navegadores, así que siéntete libre de utilizarla en tus proyectos.
4. Em/Rem
Finalmente, aquí hay dos unidades preferidas por la mayoría de los desarrolladores: em y rem. Si alguna vez ha creado un sitio web moderno y bien desarrollado, sin duda estará familiarizado con él.
Em es una unidad de medida igual al tamaño de fuente del elemento. Entonces, si tiene un tamaño de fuente de 17 px, entonces 1 em sería 17 px. De esta manera, cuando diseñes cosas, se verán iguales en diferentes dispositivos y navegadores.
Sin embargo, lidiar con ems puede resultar un desafío. Esto se debe a que el tamaño de fuente se pasa a los elementos secundarios cada vez que se configura, por lo que rápidamente puedes perder de vista a qué equivale el tamaño de fuente (especialmente cuando configuras el tamaño de fuente usando ems, lo que lo hace relativo al tamaño de fuente del padre). Ahí es donde entran los rems.
Sólo el elemento raíz puede afectar a rem en CSS. Es similar a rem en que está limitado a , pero es relativo al tamaño de fuente del elemento raíz. También implica que con una sola propiedad puedes gestionar el tamaño de tu sitio web. Rem tiene un soporte menos útil que em, pero es la unidad relativa más popular en CSS entre los desarrolladores y una alternativa preferida a em.
Unidades de ventana gráfica
Por último, tenemos el ventana gráfica unidades. Estas unidades son bastante fáciles de entender y ofrecen algunas funcionalidades nuevas e interesantes que antes no eran posibles.
La “v” en cada uno de ellos significa “ventana gráfica” porque esa es la parte principal de su relatividad. Después de eso, indica a qué parte de la ventana gráfica se encuentra la unidad, incluida la altura, el peso, el mínimo y el máximo.
Cuando se trabaja con componentes de posición fija, como ventanas emergentes, estas unidades de ventana gráfica son bastante útiles porque hacen que el componente cambie de tamaño según el tamaño de la ventana gráfica.
Diseñe con confianza
Las unidades CSS pueden resultar un poco confusas al principio, pero con un conocimiento básico de cómo funcionan, puedes crear sitios web que se vean geniales en cualquier dispositivo.
Hemos cubierto las unidades CSS esenciales que todo desarrollador debería conocer y brindamos ejemplos de cómo usarlas en sus proyectos, así que no tema experimentar y ver qué funciona mejor para usted. ¡Con un poco de práctica, podrás utilizar estas unidades como un profesional en poco tiempo!
Si todavía tiene problemas y necesita ayuda adicional, consulte , donde lo ayudaremos a construir el sitio de sus sueños con poca o ninguna experiencia.
Facebook Comments
Disqus