Web Developer Fundamentals

1

Qué aprenderás sobre HTML y CSS

2

¿Qué es el Frontend?

3

¿Qué es Backend?

4

¿Qué es FullStack?

5

Páginas Estáticas vs. Dinámicas

Quiz: Web Developer Fundamentals

HTML

6

HTML: anatomía de una página web

7

Index y su estructura básica: head

8

Index y su estructura básica: body

9

Reto: crea tu lista de compras del supermercado

10

Anatomía de una etiqueta de HTML

Quiz: HTML

Etiquetas multimedia

11

Tipos de imágenes

12

Optimización de imágenes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Quiz: Etiquetas multimedia

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

Quiz: Formularios

CSS

21

¿Qué es CSS?

22

¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID

23

Pseudo clases y pseudo elementos

24

Anatomía de una regla de CSS

25

Modelo de caja

26

Herencia

27

Especificidad en selectores

28

Demo de especificidad y orden en selectores

29

Más sobre selectores

30

Combinadores: Adjacent Siblings (combinators)

31

Combinadores: General Sibling

32

Combinadores: Hijo y Descendiente

33

Medidas

34

Medidas EM

35

Medidas REM

36

Max/Min width

37

Position

38

Display

39

Desafío: Layout 1

40

Display Flex

41

Flexbox layouts

42

Variables

43

Web fonts

Quiz: CSS

Responsive Design

44

Responsive design: media queries

45

Estrategias de responsive: mostly fluid

46

Implementando mostly fluid

47

Layout shifter CSS

48

Column drop

49

Buenas prácticas y ejemplos de responsive

50

Imágenes responsive

Quiz: Responsive Design

Accesibilidad

51

Semántica

52

Textos

53

Labels, alt y title

Próximos pasos

54

Próximos pasos como Web Developer

55

Bonus: tabla de etiquetas HTML

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Medidas

33/55
Recursos

Aportes 132

Preguntas 25

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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

Medidas absolutas
Su valor se encuentra definido en términos concretos y de manera medible. Esto quiere decir que no depende de otro valor de referencia, ni del contexto.

mm: milímetros.
cm: centímetros.
in: pulgada (“inches”, en inglés). Una pulgada equivale a 2.54 centímetros.
pt: puntos. Un punto equivale a 1 /72 de pulgada, es decir, unos 0.35 milímetros.
pc: picas. Una pica equivale a 12 puntos, o aproximadamente a 4.23 milímetros.
px: pixel. Es la unidad mínima de resolución de la pantalla. En realidad suele considerársela una unidad absoluta, relativa o híbrida dependiendo del criterio que se analice.
Si analizamos que el pixel es una división física de la pantalla podríamos decir que corresponde definirla como unidad absoluta. Sin embargo, en los diferentes dispositivos estos pixeles tienen variaciones de tamaño, que aunque son mínimas y a veces imperceptibles, dan pie a que algunos autores la consideren unidad relativa.

La principal ventaja de las unidades absolutas es que su valor es el que está expresado y el que se va a aplicar, no hay que hacer cálculos intermedios. Sin embargo, a pesar de esta aparente ventaja, no son las más utilizadas ya que resultan poco adaptables a la multiplicidad de dispositivos.


Unidades relativas
Las unidades relativas no son valores exactos sino que se calculan a partir de otro valor de referencia. A pesar de parecer más difíciles de calcular son las más utilizadas en el diseño de sitios web responsive por su adaptabilidad a los diferentes dispositivos.

Porcentaje (%), es una de las unidades relativas más utilizadas. Su valor está calculado siempre en base a otro elemento. Si lo aplicamos sobre una fuente es relativo al tamaño de la fuente declarada en el contexto, pero si lo aplicamos al width de un elemento entonces es relativo al ancho de su contenedor.


Unidades relativas a la tipografía
em: unidad relativa al tamaño de texto definido en un determinado contexto. El em es una unidad que proviene del diseño tipográfico y equivale al espacio que ocupa el ancho de una letra M (“m” mayúscula) de un determinado cuerpo y alfabeto. El em hace referencia al tamaño de letra que se está usando.

Cuando se utiliza la unidad em, es imprescindible conocer el valor de referencia, de lo contrario saber que un texto tiene 1em ó 5em no nos dice realmente el tamaño de la letra.

Cuando se asigna una medida en ems, su referencia es el tamaño de letra del primer elemento contenedor que tenga establecido un tamaño de letra.

<article>
<h2> Título </h2>
<p> Texto del párrafo </p>
</article>
article {font-size:18px}
h2 {font-size: 1.5em}
p { font-size: 0.9em}

El font-size de 18px definido en el article, lo convierte en el valor de referencia para calcular la medida del h2 y del p. En este caso el <h2> equivale a 27px, y el <p> mide 16px.

Si este elemento no se encuentra contenido en ningún otro, entonces la referencia es el tamaño de letra establecido en el <body>. Por último, en el caso de que no haya definido un font-size en el body, entonces se toma el valor por defecto establecido por los navegadores. La mayoría de los navegadores define el tamaño de los párrafos en 16px, el valor del em entonces será equivalente a 16 px. En tal caso, si indicara que el line-height sea de 1.5em, estaría diciendo que mida 24px.

ex: unidad relativa a la altura de la letra “x” minúscula de un determinado cuerpo y alfabeto. También es un concepto proveniente del diseño tipográfico.

rem: funciona igual que el em, con la diferencia que es relativo al valor de la fuente del elemento html, y no tiene en cuenta el valor heredado o del elemento que lo contiene.


Tutoriales de diseño web

Es mucho mejor trabajar con medidas relativas, ya que te ahorran mucho trabajo responsive.

Les comparto una página para calcular valores entre estas medidas

https://nekocalc.com/es

Sabias que … ?

En promedio un dedo humano mide 72 pixeles.

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:

  1. Relativas a la tipografía

  2. 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.

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.

MEDIDAS: ABSOLUTAS & RELATIVAS

  • Medidas absolutas: No va a cambiar sin importar el tamaño de la pantalla-
    • px (pixel)
    • cm (centímetro)
    • mm (milimetro)
    • in (pulgada)
  • Medidas relativas: Estas medidas pueden cambiar según la herencia del tamaño principal, o en algún tamaño que se haya indicado de manera especifica.
    • porcentaje %
    • em
    • rem

POCENTAJE

  • Utilizar porcentaje dentro de nuestro sitio web, es una buena practica ya que si utilizamos pixeles, podemos encontrar malas practicas pues si ese numero en pixeles, sale de su tamaño o es superado dentro de una pantalla, se genera un scroll o se vera “incompleto”
div{
	width: 50%;
}

lorem: Genera texto aleatorio dentro del html

Los pixeles ya NO son totalmente absolutos:
Según la referencia de W3School, 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.

Alguien más no puede ver los slides cuando cambia el profesor? Yo solo vi este toda la clase

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

Notas de la clase

Unidades absolutas
Como su nombre lo indica, son unidades que están completamente definidas. Esto quiere decir que su valor no depende de otro valor de referencia. En este grupo encontramos los siguientes elementos:

  • cm: Aumenta el tamaño de nuestro texto o elemento en centímetros

  • mm: Aumenta el tamaño de nuestro texto o elemento en milímetros

  • in: Aumenta el tamaño de nuestro texto o elemento en pulgadas (1in = 96px = 2.54cm)

  • px: Aumenta el tamaño de nuestro texto en pixeles

  • pt: Aumenta el tamaño de nuestro texto en puntos (1pt = 1/72 de 1in)

  • pc: Aumenta el tamaño de nuestro texto en picas (1pc = 12 puntos aprox)

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

Si pones un width de, por ejemplo, 400px (medida absoluta), pueden ocurrir 2 cosas: Si la pantalla es pequeña se puede generar un scroll horizontal. Por el contrario, si la pantalla es muy grande, puede quedar una parte de la misma en blanco. Eso se traduce en una mala experiencia para el usuario. Lo ideal es poner el width en porcentaje % (medida relativa), así el contenido se ajusta al tamaño de la pantalla.

A continuación les dejo una explicación muy buena sobre las medidas de pixeles y porcentaje.
https://www.youtube.com/watch?v=V7__Bz9gr3s

Es un curso muy completo y teórico y eso me gusta porque puede entender mejor el porque de las cosas. Es bueno tener todo en un solo lugar y de manera completa.

Observacion que encontre en esta pagina
fuente: https://desarrolloweb.com/articulos/unidades-medida-css-relativas-absolutas.html

Si usas em serán relativas al tamaño de texto y si usas % serán relativas al tamaño del contenedor, llegando a fórmulas distintas:

Valor % = ( dimensión objetivo / dimensión del contenedor ) x 100
Valor em = ( dimensión objetivo / fuente contenedor )

Entonces… qué nos conviene usar?
Si bien se recomienda el uso de las unidades relativas, especialmente en el diseño responsive, es conveniente conocer cómo funciona cada una de las unidades de medida y aplicarlas según convenga. Mayormente se utilizan píxeles y porcentajes para definir la estructura del documento. Por ejemplo, se puede dar medida al container usando px y aprovechar cierta flexibilidad que nos da el max-width, y definir el ancho de las columnas en porcentajes.

Para los textos y para algunas medidas como padding y margin se recomienda el uso de ems. Pero puede ocurrir que necesitemos que algunos elementos queden siempre del mismo tamaño y no se deformen, entonces en esos casos podemos aplicar unidades absolutas.

Nota: cuando la unidad es 0 no hace falta indicar la unidad de medida.

Estos dos conceptos de medidas absolutas o relativas, se me asemeja a otros dos conceptos; Variables y Constantes.
.
Absoluto y Constante, siempre van hacer igual sin importar su alrededor.
.
Relativo y Variable, cambian según su ambiente.

Algo que me costó mucho al inicio es hacer que el height ocupe el 100% de mi pantalla.

Creo que siempre es bueno manejar el tamaño de los contenedores en porcentaje, por lo mismo que dice el profesor, para que sean flexibles y no causen problemas

Truco: Para que sus etiquetas de parrafo no se vean tan cortas, dentro de la etiqueta <p></p> escriban lo siguiente sin comillas “lorem” y luego la tecla tab, esto les pondra un texto largo generado por lorem ipsum generator.

<p>lorem</p>

El resultado sería el siguiente:

Medidas:
Absoluta: El valor no va a cambiar y siempre va a ser el mismo sin importar el tamaño de la pantalla de donde estemos viendo el proyecto. Ejemplo de medida absoluta: px -> pixeles
Relativa: La medida es heredada o se basa en algún tamaño que se haya seleccionado. El valor va a ir cambiando según la pantalla de donde estemos viendo el proyecto.
Ejemplo de medida relativa: % -> porcentaje

Unidades Absolutas:

Unidades relativas:

Las unidades relativas de CSS son aquellas que tienen en cuenta el contexto donde se encuentran. Son relativas a las dimensiones del contenedor donde se han definido. Por ejemplo %, es una unidad relativa, puesto que 30% de ancho no será lo mismo para un elemento situado dentro de un contenedor de 2000px de anchura o sobre un contenedor de 1000px de anchura.

%: porcentaje
em: Altura de la fuente
rem: Root-em
vw: Viewport width
vh: Viewport Height
vmin: Viewport menor, entre altura o anchura
vmax: Viewport mayor, entre altura o anchura
ex: anchura de la fuente para la letra "x"
ch: la anchura del carácter “0” (cero)

SI quieren profundizar más del tema: https://desarrolloweb.com/articulos/unidades-medida-css-relativas-absolutas.html

W3School nos dice:

Absolute length units are not recommended for use on screen, because screen sizes vary so much. However, they can be used if the output medium is known, such as for print layout.

Referencias de las medidas:

Relativas: estas medidas heredan el tamaño o se basan en algún tamaño que se allá seleccionado y el valor ira cambiando según cambia de tamaño, es mucho mejor trabajar con medidas relativas, ya que te ahorran mucho trabajo responsive, las medida relativas son: % em y rem

  • Medida absoluta, no cambia, medida en pixeles.
  • Medida relativa, cambia en relación al dispositivo, medida en porcentaje em (elemento), rem (root elment), max-widh, min-width, max-heigth, min-heigth, vh (viewport width), vh (viewport heigth).

Rcomendación: Por estandard se recomienda utilizar medidas relativas para que funcione en diferentes pantallas

🖼️ Las medidas en CSS nos permiten definir la altura, anchura y márgenes de los elementos.

Yo difiero en algo y en todo pero en nada a la final de varios aportes que ví aqui.

No me parece que una medida absoluta en picas, pulgadas y/o centímetros sea válida como absoluta (ese es el algo), mi razón es que para impresión que sería donde se les da uso, el flujo será igual o extremadamente parecido a pantalla (ese es el todo), sin embargo es posible que se requiera en casos muy específicos (ese es el nada)…https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Values_and_units


El juego es sencillo si sigues las instrucciones a la derecha, aquí también se refleja lo importante de saber ingles como nos lo dicen en Platzi

Que buen curso

Puro copiar y pegar en los comentarios. 🤣

Unidades relativas:

Las unidades relativas de CSS son aquellas que tienen en cuenta el contexto donde se encuentran. Son relativas a las dimensiones del contenedor donde se han definido. Por ejemplo %, es una unidad relativa, puesto que 30% de ancho no será lo mismo para un elemento situado dentro de un contenedor de 2000px de anchura o sobre un contenedor de 1000px de anchura.

%: porcentaje
em: Altura de la fuente
rem: Root-em
vw: Viewport width
vh: Viewport Height
vmin: Viewport menor, entre altura o anchura
vmax: Viewport mayor, entre altura o anchura
ex: anchura de la fuente para la letra "x"
ch: la anchura del carácter “0” (cero)

33.-Medidas

Absolutas vs Relativas

Medidas Absolutas: No cambian sin importar el tamaño de la pantalla dónde estemos viendo el proyecto.

  • mm=milimetros.
  • cm=centimetros.
  • in=pulgada.
  • pc=picas.
  • px=pixel.

Medidas Relativas: Estás si cambian dependiendo de la pantalla del dispositivo.

  • %.
  • em=elemento.
  • rem.=root em(elemento).
  • width y height (min y max): también son relativas porque varían dependiendo del tamaño de la pantalla en relación con la posición en la que se encuentra en ese momento.
  • viewport width y viewport height.

Cuando se genera un scroll se le llama overflow que como pudiste adivinar NO ES BUENA PRACTICA. Es importante hacerlo flexible.

  • Absolutas : Medidas que no van a cambiar (width:30px)
  • Relativas: Medidas que si van a variar (width:30%)
    • EM
    • REM
    • min-width - max width
    • min-heigth - max-heigth
    • vw - vh

Las medidas absolutas no cambiarán su valor. Podemos asimilarlas con las constantes.
Las medidas relativas cambiarán su valor dependiendo del dispositivo en el que estemos visualizando la páina.

Hola este es mi aporte.


Absolutas:
Son medidas que tienen un tamaño definido y que no va a cambiar sin importar el dispostivos que usemos(pc, ipad, iphone). Normalmente la definimos en pixeles.
Relativas: Son medidas que tienen un tamaño relativo y que sera distinto en el dispositivo que se use.

Aquí les dejo el link de un Blog en Platzi que explica sobre las unidades de medida en CSS. Muy bien explicado.

Las unidades relativas al viewport son muy importantes y se deben tomar en cuenta cuando realizamos una web para varios tipos de resolución de pantalla. Combinando esta serie de medidas con otros elementos que podemos agregar a nuestra sintaxis conseguiremos realizar un excelente trabajo.

Muy buena data 😃

Me gusta la figura de star wars que hay detras

Correccion: Una em es una unidad de medida en el campo de la tipografía, lo que equivale al tamaño en puntos especificado actualmente. También es conocida como espacio eme, que equivale al antiguo cuadratín utilizado en el sistema tipográfico tradicional.

RESUMEN CLASE 33:
MEDIDAS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Medidas</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <main>
        <p>Hola soy un texto ejemplo para la clase</p>
    </main>
</body>
</html>

CSS

main {
    background-color: red;
    width: 100%;
    height: 500px;
}

p {
    font-size: 16px;
}

Información resumida de esta clase
#EstudiantesDePlatzi

  • Dentro de CSS podemos dar medidas absolutas o medidas relativas. Las medidas absolutas no varían, son fijas, mientras las medidas relativas si varían y se ajustan

  • Que el usuario tenga que hacer Scroll de manera horizontal es una mala practica por parte de nosotros

Overflow = Desbordamiento
"Tremendo aporte el mio jaja"

super me encanto esta clase.

genial!

medidas

las medidas ABSOLUTAS no cambian de tamaño y las medidas RELATIVAS heredan el tamaño de alguna etiqueta padre que tenga valores

Mis apuntes de la clase

Resumen

Cuando ajustamos el tamaño de imágenes, fuentes, etc. con px, este no va a cambiar sin importar el tamaño de la pantalla en que se visualice.
Las relativas cambian porque manejan porcentajes. El tamaño varía dependiendo del dispositivo en que se vea.
em significa elemento.
rem significa root elemento.
max-min varía dependiendo de la pantalla y posición en que se encuentre.

main {
    background-color: red;
    width: 100%;
    height: 500px;
}
p {
    font-size: 16px;
}
  • Casi siempre vamos a usar porcentajes en nuestro width, ya que usar un tamaño absoluto puede provocar scroll, lo que es una mala práctica. Los contenedores deben ser flexibles.

  • Si colocamos en font-size: 50%; se va a tomar la mitad del tamaño de la fuente html, que por defecto son 16px.

Mejores practicas -> medidas relativas -> em y rem

Muy buena clase, muy clara.
Enfatizar: hay que evitar hacer scroll horizontal. 😄

Medidas absolutas

OVERFLOW

Unidades de longitud relativa
Las unidades de longitud relativa son relativas a algo más, por ejemplo, al tamaño de letra del elemento principal o al tamaño de la ventana gráfica. La ventaja de usar unidades relativas es que con una planificación cuidadosa puedes lograr que el tamaño del texto u otros elementos escalen en relación con todo lo demás en la página.
Mozilla - Valores y Unidades

Flipé cuando usó la opción de responsive desde el inspector, no tenía idea!

Medidas

  • Absolutas: las medidas absolutas no varían, se mantiene constantes. Ej: pixeles.

  • Relativas: las medidas relativates por su parte, cambian dependiendo de diferentes razones, como las dimensiones de la pantalla del dispositivo, el tamaño del elemento padre o la posición relativa entre elementos hermanos, entre otros. Ej: porcentaje %, em, rem, max-width/max-height, viewport width vw, viewport height vh.

Mi código de la clase: (pueden verlo en ejecución desde aqui)
\

HTML

<main>
	<section>
		<h2>Esplicación</h2>
		<ul>
			<li>
				<strong>Medidas absolutas</strong>: Son las que están dadas pixeles (<strong>px</strong>) ya que no cambian el
				tamaño en ningún dispositivo
			</li>
			<li>
				<strong>Medidas relativas</strong>: Son las que están dadas en porcentajes, generalmente utilizadas con

				<ul>
					<li>
						<code>%</code> hace referencia al porcentaje de la medida heredada desde un elemento padre sea un ancho,
						alto o tamaño de fuente.
					</li>

					<li>
						<code>em</code> / <code>rem</code> que hacen referencia al tamaño de la fuente. Em lo hace heredando en base
						desde el último elemento padre al que se le haya asignado un tamaño de fuente y rem lo hace en base al
						tamaño de fuente de la etiqueta html
					</li>
					<li>
						<code>max-with</code> / <code>max-height</code> que determinan un ancho o alto máximo (relativo o absoluto)
						para un elemento
					</li>
					<li>
						<code>min-with</code> / <code>min-height</code> que determinan un ancho o alto mínimo (relativo o absoluto)
						para un elemento
					</li>
					<li>
						<code>vh</code> / <code>vw</code> viewport height y viewport width que permite determinar un tamaño en base
						al alto o ancho de la pantalla del navegador
					</li>
				</ul>
			</li>
		</ul>
	</section>
	<section class="practice">
		<p>Soy un "p" dentro de un sectión que es modificado desde CSS😄</p>
	</section>
</main>


CSS

p {
	font-size: 16px;
	/* Si es una medida absoluta no se modificará en ningún tamaño de pantalla, si por ejemplo es un porcentaje, tomará el tamaño heredado para sacar el porcentaje */
}

.practice {
	background-color: red;
	width: 600px;
	height: 500px;
	/* al colocar un ancho o un alto absoluto que exceda el tamaño de pantalla, genera un scroll, en cualquiera de las direcciones, esto se conoce como "overflow". El overflow que se debe evitar es el horizontal
	*/
}

Nota:
No es una buena práctica utilizar una medida absoluta para el width de un contenedor

De lo que comprendí,

  • El % sirve para darnos medidas relativas es decir, se ajusta a la pantalla en la que este abriendo el usuario

  • Mientras que el usar el valor directo en este caso “px” nos da un valor absoluto, por lo que si se abre en una pantalla mas pequeña/grande habra que hacer scroll o quedaran espacios en blanco

⭐️⭐️⭐️⭐️⭐️

main {
  background-color: red;
  width: 600px;
  height: 500px;
}
p {
  font-size: 16px;
}

MEDIDAS

Absolutas

  • Pixeles: px

Relativas

  • Porcentaje: %
  • em
  • rem
  • max-width / max-height
  • min-width / min-height
  • vw: viewport width
  • vh: viewport heigth

Existen varios tipos de unidades, vamos a desglosarlas en grupos y explicar cada una de ellas. Más adelante veremos las propiedades de CSS que pueden utilizarlas.

Unidades absolutas
Las unidades absolutas son un tipo de medida fija que no cambia, que no depende de ningún otro factor. Son ideales en contextos donde las medidas no varían como pueden ser en medios impresos (documentos, impresiones, etc…), pero son unidades poco adecuadas para la web, ya que no tienen la capacidad de adaptarse a diferentes resoluciones o pantallas, que es lo que tendemos a hacer hoy en día.

Unidades relativas
Existen ciertas unidades menos utilizadas dentro de las unidades relativas, como por ejemplo las unidades ex o ch. Mientras que la unidad em es el tamaño de la fuente establecida por el navegador del usuario, la unidad ex es la mitad del tamaño de la fuente establecida por el navegador del usuario, por lo que se cumple que 1ex es igual a 0.5em.

https://lenguajecss.com/css/modelo-de-cajas/unidades-css/

Unidades absolutas
Unidad Significado Medida aproximada
cm Centímetros 1cm = 10mm
pc Picas 1pc = 4.23mm
mm Milímetros 1mm = 1mm
pt Puntos 1pt = 0.35mm

El scroll seguía apareciendo con el width al 100% pero me funciono con width: auto;

<    <section class="practica_6">
        <main>
            <h1>MEDIDAS</h1>
            <h2>ABSOLUTA</h2>
            <P>a mi nadie me cambia</P>
            <h2>RELATIVAS</h2>
            <p>me adapto a lo que sea</p>
        </main>
    </section>> 

Medidas

Cuando hablamos de medidas absolutas hablamos de utilizar pixeles, tamaño de fuente, width o height con numero o pixeles siendo esta una medida absoluta ya que esta no cambiará sin importar el tamaño de nuestro navegador.

Cuando hablamos de medidas relativas estas si cambian, el tamaño varia mucho dependiendo del tamaño del dispositivo en el que veamos el proyecto ya que es con porcentaje %, no solo es con porcentaje también contamos con otras medidas.

![](
Pequeño aporte

/* el tamaño dado en pixeles no va a variar, sin importar la pantalla se mantiene el tamaño /
main{
background-color: red;
/
el main para este caso en el width va a tomar siempre el 100% de la pantalla, si lo cambio a px se quedara fijo, generando overflow
donde se hace necesario usar scroll */
width: 100%;
height: 500px;
}
p {

font-size: 18px;

}
/* para este caso el tamaño correspondera a un 50%, sin embargo recordar que la etiqueta de parrafo por defecto trae 8px, por lo que
dicho valor por defecto se debe quitar,ya que si no esto generará que se vean los 8px descritos anteriormente /
/
p{
font-size: 50%;
} */

Medidas

Absolutas

Son medidas que no van a cambiar sin importar el tamano de la pantalla.

Ejemplo

  • px

Relativas

El tamano varia con relacion al tamano de la pantalla

Ejemplo

  • %
  • em
  • rem
  • max-width / max-height
  • min-width / min-height
  • vw (viwport widgth)
  • vh (viwport height)

![](

Lo que aprendimos a NO hacer en esta clase:

  • Generar un ancho de página que no sea flexible. Esto hace que se deba hacer scroll para ver todo el contenido.

Medidas en CSS:

  • Medidas relativas
  • Medidas absolutas

Medidas Absolutas :
px

Medidas Relativas:
%
em
rem
max-width
min-width
vw
vh

Unidades de CSS por W3School.

Lo malo de usar medidas absolutas. Overflow y generación de skroll.

Relativamente absoluto

Medidas

👌

Qué buena información