Una vez que nos interesamos en saber cómo desarrollar nuestra primera página web, empezamos a encontrar un mundo de sintaxis, herramientas y otras una cantidad enorme de cosas que tienen la posibilidad de confundirnos un poco al principio. Sin embargo, un paso bastante fundamental en el aprendizaje web es aprender las unidades, tamaños y medidas que tenemos la posibilidad de usar en CSS.
Pero no tienes por qué preocuparte. Ya que, en este post, te vamos a enseñar cuáles son las unidades de medida en CSS que existen y cómo usarlas en tus proyectos:
Unidades de medida absolutas:
Primero vamos hablar de las medidas absolutas, que simplemente son las unidades de medida en CSS que realizan alusión a las unidades que no cambian, aquellas que en todos los entornos son equivalentes. En las medidas absolutas existen siete unidades que son de gran ayuda, te las presentamos a continuación:
- in: hace referencia a las pulgadas, que son iguales a 2.54cm.
- cm: se refiere a los centímetros.
- mm: hace referencia a los milímetros.
- q: se refiere a un cuarto de la unidad mm. 1q=0.248mm.
- pt: un punto es igual a 1/72 de una pulgada o 0.35mm.
- pc: una pica es igual a 12 puntos, o sea 4.23mm.
- px: esta etiqueta se refiere a los píxeles que, aunque son absolutos (0.26mm), también son relativos a la densidad de la pantalla.
Unidades de medida relativas:
Ya que hemos hablado de las unidades absolutas, ahora es el turno de las unidades relativas. Estas son un poco más flexibles, es decir, se ajusta de consenso al tamaño de otro costo de alusión. Aunque tienen la posibilidad de ser al inicio más complicadas, sin embargo, algunos prefieren las unidades de medida relativas ya que los tamaños de los recursos dependen el uno del otro. Las unidades relativas más conocidas son las siguientes:
- em: tamaño de fuente establecida en navegador.
- ex: mitad del tamaño de fuente del navegador.
- ch: la anchura del carácter "0" (cero).
- %: porcentaje.
- rem: tamaño de fuente personalizado.
Unidades del viewport
Debemos mencionar estas unidades ya que por ser prácticamente “nuevas” su uso nos facilita el trabajo al momento de programar. Pertenecen también a las unidades relativas, pues bien fueron diseñadas con lo mejor de las unidades relativas al viewport, son de gran importancia ya que se tienen que tener presente al momento que realizamos una web para diversos tipos de resolución de pantalla.
Estas unidades sirven para dimensionar la pantalla y organizar los elementos dentro de esta:
- vw: Porcentaje relativo a la anchura del viewport.
- vh: Porcentaje relativo a la altura del viewport.
- vmin: Entre vw y vh toma el que tenga menor valor.
- vmax: Entre vw y vh toma el que tenga mayor valor.
Si deseas profundizar más en la utilización de las medidas en CSS y aprender a utilizarlos en un plan, te invitamos a nuestro curso de programación desde cero de MGPanel, ahí Podrás dominar este y otros temas en programación web. Además de pertenecer a la gran comunidad de MGPanel. ¡Únete ahora!.