El píxel perfecto para CSS

#CSS

El píxel perfecto para CSS



Si estás leyendo esto, estoy bastante seguro de que conoces al menos 5 formas de centrar elementos HTML usando CSS. Por lo tanto, 15 opciones para el tamaño relativo no deberían ser una sorpresa para usted. Déjame decirte, algunos de ellos son extraños.

¿Qué son las unidades relativas y por qué las necesitamos?


¿Alguna vez se ha preguntado si ninguna de las pantallas que posee tiene los mismos tamaños y dimensiones? Pero todos ellos muestran páginas web. Por lo tanto, las páginas web deben tener un estilo que se adapte en proporciones relativas a la pantalla (o cualquier otro elemento HTML).

En resumen, hacer que estos diseños adaptables y receptivos sean posibles con gracia.

El genial em

Un em, es básicamente el tamaño de una letra “M” (bien podría ser cualquier otra letra) del elemento al cual se esté aplicando esta medida. Es decir, si en elemento tiene aplicado un tamaño de fuente de 16 pixeles, entonces 1 em será igual a 16px (los navegadores de manera predeterminada definen un font-size de 16px al elemento HTML, por lo tanto, por defecto 1em es igual a 16px).

En resumen el elemento actual ( 2em significa dos veces el tamaño de fuente actual). Una propiedad de longitud que depende del tamaño de la fuente, ¡sí!, ¡que mágico!

.post { 
   font-size: 24px;
   border-left: 0.25em solid #4a90e2;
}
/* El ancho del borde izquierdo se calculará a 6px. */

Trabajar con em puede ser complicado ya que obtiene su valor relativamente de su elemento principal. En el caso de elementos anidados, se vuelve desordenado cuando el padre también tiene em valor.
También se puede aplicar a elementos generales del layout aunque no es muy recomendable, ya que si eventualmente se cambia el tamaño de fuente de uno de ellos, se podría estropear el diseño.

El salvador rem (root rem)

La unidad de medida rem es muy similar a em, con la única diferencia de que no es escalable, esto quiere decir que no depende del elemento padre, sino del elemento raíz del documento, el elemento HTML. Rem significa “Root Em“, o sea, es un em basado en la raíz.

Esto significa que si el elemento HTML tiene un tamaño de fuente de 16px (como es por defecto), entonces 1rem, sería igual a 16px, y si queremos aplicar un tamaño basado en rem a cualquier elemento de la página, no importará cual sea el tamaño de fuente que tenga asociado ese elemento, ya que 1 rem siempre será igual a 16 pixeles a no ser que se modifique el elemento raíz.

.container {
margin: 0 auto;
width: 90%;
max-width: 75rem;
}
Para poder convertir una medida de pixeles a rem solo tienes que multiplicar el tamaño que quieres obtener por el número 0.0625, eso te dará el tamaño que debes usar en rem. Así es como he llegado a definir que 75rem es igual a 1200px:

75rem = 1200px x 0.0625

p {
    margin-left: 1rem;
}
h4 {
    font-size: 2rem;
}
Para esta técnica, es fundamental establecer el tamaño de fuente base; por defecto, el navegador suele ser de 16 píxeles. 

VH y VW

A diferencia de em y rem que dependen del tamaño de la fuente vh y vw dependen del tamaño de la ventana gráfica.

1vh= 1% o 1/100 de la altura del viewport
1vw= 1% o 1/100 del ancho del viewport

Es posible que haya visto algunos sitios con tipografía que se adapte a la perfección a medida que cambia el tamaño de la ventana de su navegador vw y lo vh hace realidad.

VMAX y VMIN

Viewport max y viewport min: 1vw o 1vh, lo que sea más grande o más pequeño respectivamente.

1vmax= 1% o 1/100 del valor más grande entre 1vw o 1vh
1vmin= 1% o 1/100 del valor más pequeño entre 1vw o 1vh 


vmin utiliza el ratio del lado más pequeño. Es decir, si la altura de la ventana del navegador es menor que su anchura, 1vmin será equivalente a 1vh. Si la anchura del navegador es menor de lo que es la altura , 1vmin será equivalente a 1vw.

vmax es lo opuesto: se utiliza el lado mayor. Así 1vmax será equivalente a 1 vw a si la ventana es más ancha que alta; Si el navegador es más alto que ancho, 1vmax será equivalente a 1vh.

En qué carajo se utilizan...
vmin y vmax son un excelente sustituto de (o añadido a) las media queries de orientación CSS (@media screen y (orientation : portrait) o @media screen y (orientation : landscape)), ya que responden inmediatamente a la relación de aspecto de la pantalla.



good'ol

Bastante popular, el amigo de todos y bastante obvio % es relativo a su elemento padre.
.post {
  font-size: 24px;
}
.post-category { 
  font-size: 85%;
}
.post-title { 
  font-size: 135%;
}
/*     
Elementos secundarios con % de tamaño de letra ...
     
  85%   
  0.85 * 24 = 20.4 px       
  135%   
  1.35 * 24 = 32.4 px
*/

Ahora veremos otras unidades raras, oscuras y relativamente oscuras para mí y o para tí. 

VI y VB

Las API experimentales no están destinadas a ser utilizadas en producción ya que no hay soporte para el navegador.

1vb= 1% del tamaño del bloque inicial que contiene , en la dirección del eje del bloque del elemento raíz .
1vh= 1% del tamaño del bloque inicial que contiene , en la dirección del eje en línea del elemento raíz .

No son muy populares ni compatibles, ya que son bastante nuevos; puede obtener más información sobre ellos en el Módulo de Valor de CSS y Unidades 4.

La verdad no entendi mucho esta parte, si alguien más que esté leyendo esta entrada puede explicar se los agradeceria mucho.

lh y rlh

Son como em y, rem pero en lugar del tamaño de fuente, dependen de la altura de la línea.

lh= Igual al valor calculado de la propiedad de altura de línea del elemento en el que se utiliza.
rlh= Igual al valor calculado de la propiedad de altura de línea en el elemento raíz.


ex

La **ex**unidad rara vez se utiliza. Su propósito es expresar tamaños que deben estar relacionados con la altura x de una fuente. La altura de x es, aproximadamente, la altura de las letras minúsculas como a, c, m, o o

CAP

Es la medida de la llamada altura de la tapa. La especificación define la altura máxima como aproximadamente igual a la altura ** de una letra latina mayúscula .

ch

Representa el ancho ** del carácter 0 , o más precisamente la medida de avance del glifo "0" (cero, el carácter Unicode U + 0030) en la fuente del elemento.

Conteo ideográfico 'ic'

ic Es el equivalente oriental de lo ch mencionado anteriormente. Es el tamaño del ideograma CJK (chino / japonés / coreano) *水*("agua", U + 6C34), por lo que puede interpretarse aproximadamente como "recuento de ideogramas".


Algunos de estos son bastante extraños y poco comunes, pero estoy bastante seguro de que cada uno de ellos tiene sus propios casos de uso y razones para existir. ¿Cuáles son tus favoritas?

No hay comentarios.:

Con tecnología de Blogger.