Medidas Absolutas y Relativas en CSS: Píxeles y Porcentajes
Contenido del curso
medida absoluta: el valor de este no cambia y siempre sera el mismo asi la pagina cambie su tamaño, las medidas absolutas son: . mm = milimetros cm = centimetros in = pulgada pc = picas px = pixel .
las medidas relativas: estas medidas heredan el tamaño o se basan en algun tamaño que se alla seleccionado y el valor ira cambiando segun si la pagina cambia de tamaño, las medidas relativas son : . % em rem
Increíble aporte :star: Te recomiendo tomar luego cursos de Frameworks de CSS que tenemos en Platzi. Los frameworks de CSS son muy solicitados en la industria :star:
Cuales son los frameworks de CSS? es como Boostrap ?
Sabias que ... ?
En promedio un dedo humano mide 72 pixeles.
No... No lo sabía xD
Esta medida nos podria servir para tenerlo en cuenta a la hora de ver el tamaño de los botones
Es mucho mejor trabajar con medidas relativas, ya que te ahorran mucho trabajo responsive.
Tienes mucha razon...
No creo de todas maneras tendrías que cup al cular bien el porcentaje para las pantallas estándares.
Unidades relativas
Este tipo de unidad es más flexible y se expresa en forma de porcentaje (%). Me refiero a su flexibilidad porque se adapta de acuerdo al tamaño de otro valor de referencia. Por ejemplo, en el mundo real tu hermano y tú tienen dos balones de futbol. Un balón es grande y el otro es pequeño, pero a cada uno le corresponde la mitad de cada uno de esos balones (50%). No importa el tamaño del balón, porque igual siempre vas a ser dueño del 50%. Entonces, si el balón grande redujera su tamaño, igual tendrías el 50% de este. Ahora aplica este ejemplo a los distintos tipos de resolución de pantalla. Ahora bien, las unidades relativas se subdividen en 2 grupos:
Relativas a la tipografía
Relativas al viewport
Relativas a la tipografía
em: Relativo al tamaño de fuente de un elemento. Si, por ejemplo, utilizamos 3em (font-size: 3em); mi texto aumentará 3 veces su tamaño en relación al tamaño que se esté utilizando por defecto.
ex: Aumenta el tamaño de mi letra en cuanto a su altura.
Rem: Es igual a (em) con la diferencia de que este actúa en la raíz. O sea, en la letra que esté utilizando por defecto. Relativas al viewport - ventana
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.
Muy buen aporte!
Muchas gracias!
Los pixeles ya NO son ++totalmente++ absolutos: Según la referencia de W3School%20are%20relative,1px%20implies%20multiple%20device%20pixels.), los pixeles son relativos al dispositivo en el que visualicemos. De esta forma si usamos un dispositivo "low-dpi" (dpi son puntos por pulgadas) los pixeles serán diferentes de si visualizamos en una pantalla de alta resolución. Si bien igual siguen siendo considerados absolutos... pues esto puede ser algo a considerar al momento de desarrollar.
Genial..!
En esta clase trabajamos con Medidas, estamos viendo la introducción a este tema. Recuerden que tenemos 2 tipos de medidas las Absolutas y las Relativas.
Las absolutas son aquellas que se especifican en px y estas siempre tendrán ese valor, se vean en la pantalla que se vean. En medida de lo posible es mejor trabajar con medidas relativas, ademas de que al hacer Responsive Design que lo veremos pronto. Nos sera mas flexible el sitio para modificar a nuestro gusto.
Gracias por tu contribucion.
No hay de que @Sebastian Saludos compañero :)
MEDIDAS: ABSOLUTAS & RELATIVAS
POCENTAJE
div{ width: 50%; }
muy buena la explicación, gracias!
lorem: Genera texto aleatorio dentro del html
No es un texto aleatorio, es un lorem ipsum, pero buen apunte para utilizar un texto de forma rápida! :D
El texto en sí no tiene sentido, aunque no es completamente aleatorio, sino que deriva de un texto de Cicerón en lengua latina, a cuyas palabras se les han eliminado sílabas o letras. El significado del texto no tiene importancia, ya que solo es una demostración o prueba, pero se inspira en la obra de Cicerón De finibus bonorum et malorum (Sobre los límites del bien y del mal).
Saludos!
Notas de la clase
¿Evernote?
OneNote, pero me cambié a Notion
Las medidas en px suelen ser útiles para casos muy específicos, aunque la mayoría de las veces suele usarse porcentaje o incluso "em" y "rem", a mi las medidas de "vh" y "vw" me han servido generalmente para estilizar tamaños de imágenes jaja
como le hace para mostrar como se veria la pagina en un dispositivo movil
Si estás en un navegador Chrome, presiona f12 para abrir las herramientas de desarrollo. En la esquina superior izquierda (normalmente) encontrarás un botón para habilitar una vista especial para mobile. https://developers.google.com/web/tools/chrome-devtools/device-mode?hl=es
Con las Devtools se hace esto :D también puedes tomar el Curso de DevTools para que aprendas muchas más cosas de las que tiene https://platzi.com/clases/devtools/
Alguien más no puede ver los slides cuando cambia el profesor? Yo solo vi este toda la clase
Hola Luis, si esta clas tiene ese problema con los slides, en este caso tenemos que escuchar y buscar la documentacion para entender mejor la explicacion.
Es interesante como ha envejecido la Plataforma...
Clase 33 - Medidas
¿Qué tipos de medidas hay en CSS?
¿Qué son las medidas absolutas?
¿Qué son las medias relativas?
¿Cuál es la medida absoluta que podemos usar en CSS?
¿Cuáles son las medidas relativas que podemos usar en CSS?
¿Es buena práctica que usemos medidas relativas para definir el width de un contenedor?
Hola, por qué si usamos width al 100% si se ajusta al ancho de la pantalla y pero si uso el height al 100%, lo ajusta al tamaño del contenido? En ese caso cómo debería ser para ajustarlo a la altura de la pantalla?
Gracias por su ayuda :D
Se ajusta al 100% del tamaño de la pantalla porque la etiqueta que estas usando tiene probablemente un display de block el cual ocupa todo el largo disponible. Si quieres hacer referencia al tamaño de la pantalla debes usar las unidades vh y vw. En todo caso, un par de videítos más adelante ves todo lo que te acabo de resumir :) para que no sufras tanto.
Por la alineación de las cajas en la pantalla. Los elementos se ubican en bloques que normalmente se ubican de forma vertical. El 100% del ancho de una caja es el ancho de la pantalla, el 100% de alto de la caja termina donde termina el contenido. Es más la ubicación de las cajas en la pantalla.
Las medidas relativas definen su valor en relación con otra medida, por lo que para obtener su valor real, se debe realizar alguna operación con el valor indicado.
Las nedidas absolutas son un tipo de medida fija que no cambia, que no depende de ningún otro factor
Medidas absolutas
Hola PlatziNauta :)
¿Quieres ver tu proyecto como si fuera en el celular? te dejo este link en donde te explica como hacerlo, para tenerlo igual al profesor :) Quiero Ver
El recurso ya no existe
Me aparece la seccion de precios jaja
Mis apuntes de la clase
Excelente aporte, gracias!! Disculpa que herramienta utilizas para hacer tus apuntes??
Holaa, muchas gracias! Es una app se llama goodnotes
