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 REM

35/55
Recursos

Aportes 283

Preguntas 93

Ordenar por:

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

Mas de uno dejando de usar px 🤣. Solo rem ❤️

Así que mejor usemos REM ✌🏼😎

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.

Por defecto el html viene con un tamaño de fuente de 16px asi que siempre
.
1 REM = 16PX
.
Si queremos aplicar rem de una forma mas sencilla para no tener que hacer tantos calculos asemos lo siguiente
.
vamos a reescribir en css nuestro html

html {
      font-size: 62.5%; 
     }

esto lo que hara es darle a el html un valor de 10px ya que 16px - 62.5% = 10px

ahora si por ejemplo a una etiqueta le asignamos 2rem este hara referencia a 20px, o si por ejemplo le damos un valor de 1.5rem su valor sera de 15px

Algo importante que mencionó Diego en un Live que el hizo.
Es muy importante usar rem para las fuentes ya que hay gente con problemas de vista que puede que la letra sea muy pequeña para ellos y poco legible. Y al usar rem, damos la oportunidad de cambiar el tamaño de fuente desde el navegador de su dispositivo. Algo que no es posible hacer si usamos medidas absolutas.

ok sere un buen desarrollador y usare a REM XD

Unidades absolutas
Generalmente se usa el pixel “px”.

h1{
	width: 500px;
}

El problema de usar medidas absolutas es que pueden ser desproporcionadas para distintos tipos de dispositivos.
Unidades Relativas
*
Porcentaje

/*Ocupará todo el ancho de la pantalla sin importar el tamaño*/
h1{
	width: 100%;
}

em
Depende exclusivamente del cuerpo tipográfico. Es decir del font-size de la etiqueta de su elemento padre.

body{
	font-size: 20px;
}
h1{
	font-size: 2em; /*  2 x 20 = 40px */		
}

Lo bueno de esta unidad es que si en un futuro modificamos el valor del font-size, entonces sus otros valores se ajustarán como podría pasar en el siguiente ejemplo de código.

p {
	font-size: 24px;
	margin-top: 1em; /* 1 x 24 = 24px */
	margin-bottom: 1em; /* 1 x 24 = 24 px*/ 
}

Lo malo, es que si lo usamos como el profesor planteó como un problema al usar em, podríamos perder la cuenta de cómo calcular el em si es que tenemos muchos elementos anidados (un elemento dentro de otro) ya que depende de su padre directo.

rem (root em)
En este caso, rem siempre va a depender del elemento raíz, de la etiqueta html.

html{
	font-size: 20px;
}
h1{
	font-size: 2em; /*  2 x 20 = 40px */		
}

Truco que nos recomendó el profe 😉

/*Como por defecto el font-size es 16px, el 62,5% nos daría 10px*/
html {
	font-size: 62.5%;
}
p {
	font-size: 1.6rem; /*  1.6 x 10 = 16px */		
}
/*entonces podemos calcular rem fácilmente multiplicando por 10

Si te gustó mi resumen dale me gusta y comenta, así me motivo a hacer más resúmenes 😃

Sigamos aprendiendo juntos 💪

Amigos les dejo un aporte que me sirve mucho para mis apuntes, cuando tengan algun ejemplo que sea gif, video, url etc, lo que hago yo es pegar el link de la imagen gif etc, en esta pagina https://www.flowcode.com/ y posteriormente imprimirlo para tener el qr en el cuaderno y nadamas escanearlo cuando lo ocupes ver! ;D

Igual pueden establecer el
html{
font-size=6.25%;
}
Lo cual haría que 1 rem fuera igual a un pixel
entonces para tener 16 px solo basta poner:
p {
font-size=16 rem;
}

Déjemos los px para el border 😄

Para mi Diego es de los mejores instructores de Platzi.

(10 / 16) * 100 = 62.5

10 Es la medida base que queremos usar
16 es lo que equivale un REM
100 es el porcentaje

De esta forma es que funciona ese porcentaje:D!

font-size: 62.5%;

CSS rem

En css existen medidas absolutas(px) y relativas(em, rem, %).
Utilizar medidas absolutas evita el escalamiento.

Nota: Un Trick en Css es configurar tu archivo inicial de la siguiente forma:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  font-size: 62.5%;
}

Asi podemos utilizar medidas relativas basadas en REM con una escala
similar a pixeles, (1.6rem => 16px, 3.5rem => 35px)

Siempre usaba la medida rem, pero no sabía para qué era en concreto. Esta clase me dejó :

“Usually default font-size of the browser is 16px. Setting font-size: 100% will make 1rem = 16px. But it will make calculations a little difficult. A better way is to set font-size: 62.5%. Because 62.5% of 16px is 10px. Which makes 1rem = 10px.”

CSS units for font-size: px | em | rem

Descripción gráfica del truco del 62.5%:

32. Mis apuntes sobre: “Medidas REM”

Unidad de medida absoluta significa REM = root element, la medida siempre va a tomar como referencia a la etiqueta ROOT.

A diferencia de EM que toma como referencia su padre directo.

Por ejemplo, si <p> tiene por defecto 16px, si ponemos como medida 1rem, te dará 16px, siempre.

Si seteamos el font-size de html en 62.5%, podremos usar <rem> como medida, indicando por ejemplo 1.6rem = 16px, 1rem = 10px, 2rem = 20px, etc:

html {
    font-size: 62.5%;
}

Les comparto el código de la clase:

Código HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <main>
        <p>I'm a text example</p>
        <div>
            <p>I'm another text</p>
            <div>
                <p>I'm another text</p>
                <div>
                    <p>I'm another text</p>
                    <div>
                        <p>I'm another text</p>
                    </div>
                </div>
            </div>
        </div>
    </main>
</body>
</html>

Código CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
}
p {
    font-size: 1.6rem;
}
main div {
    font-size: 1.6rem;
}

Les comparto un momo al respecto 😃.

¿Cómo se llega al 62.5%?
Solución: Es una regla de tres simple
Si para 16px corresponde 100%, para 10px será:
10px * 100% / 16px = 62.5%

En mi Twitter sigo a muchos devs y siempre decían que rem es lo mejor, ahora ya entiendo el por qué jejeje

cual seria la diferencia de ponerle al html directamente font-size: 10px… ? si es la medida que de ahora en adelante se desea tenga

Encontré esto en la página de Cristalab, uno de los proyectos de @freddier antes de crear Platzi 🚀🚀

Le dicen viejo método desde el 2014 😆

Un pequeño aporte a la clase 😃

La clave para usar rem, nunca lo olviden

html {
    font-size: 62.5%;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 62.5%; /* equivale a 10 px*/
p {
  font-size: 1.6rem; /* equivale a 16 px*/
}
main div {
  font-size: 1.6rem;
}

Considero que seria mas fácil colocar un estilos de esta manera

html {
	font-size: 10px; // Equivale font-size: 62.5%;
}
p {
	font-size: 1.6rem;	//Equivale font-size: 16px;
}

Pienso que puede llegar a ser mas facil de recordar.

Creo que la expresión de Diego en el minuto 4:15 fue mi reacción de toda esta clase 😂

TailwindCSS usa REM 😄

Les comparto mis apuntes de esta leccion 😃

Hola a quién se sintió [email protected] en la conversión del tamaño de fuente en la etiqueta HTML sencillamente es una regla de tres.
Teniendo en cuenta que la etiqueta trae por default la medida de 16px y esta es el 100% de la misma, entonces tenemos:
X => 62.5%
16px
=>100%

x= 10px

😃

Como buenas practicas debemos utilizar pixeles para tamaños de fuentes y para ciertos tamaños relativos en contenedores empezar a utilizar el Rem como nuestra medida en todos los proyectos y css que hagamos

Ese hack de poner HTML en 62.5% estuvo sublime. Let’s GOOOOOOOO

how genial REM
jajaj justo mi apellido es REMACHE no se me va a olvidar el REM

increible no me podia ese truco para nada enserio

VERSION MEJORADA DE LA IDEA DE DIEGO
De esta manera tendremos que 1rem sea igual a 1pixel.

Tomamos el font-size del html como 6.25%:

Es una convención estándar que la letra sea de 16px en los navegadores, si el usuario cambia el tamaño de la fuente el diseño igualmente se escala respetando la accesibilidad, entonces si desarrollas algo sobre el estándar de letra no tienes problemas, y si el usuario final cambia el tamaño de la letra no se vera afectado ya que se basa en una medida porcentual, este truco del 62.5% no se debe usar con componentes de terceros o con gestores de CSS ya que no tendrías el control de dichos parámetros.

Usalo siempre y cuando tengas el control total del CSS.

¡¡Recomendado!! Truco para trabajar en rem

¡HEEEEEYYYY! Si no quieren estar haciendo siempre la conversión de px a rem, existe una extensión para ello en VS Code llamada "px to rem"
Una vez la tengamos instalada, lo único que tenemos que hacer es dar “alt izq + z” y automáticamente nos hará la conversión.
La pueden descargar aquí

Espero les sirva 😁

Imprescindible a la hora de crear un .css

Siguiendo casi las mejores prácticas (si ven el video que dejaré abajo entenderán por qué esto sigue sin ser 100% lo mejor) es mejor hacerlo así:

  • Se incluye este archivo:
  • Luego, solo es necesario hacer esto:

Video explicación de Normalize CSS: https://www.youtube.com/watch?v=TeQgd0NS_lQ

Esta imagen me ayudó a comprender mejor.😊

¿Porqué cuando se declara la propiedad font-size: 62.5%; dentro del selector html se obtiene como resultado 10px?

html {
  font-size: 62.5%;
}

Por defecto la propiedad font-size del elemento html raíz es de 16px, despejando los valores con la regla de 3 simple directa se obtiene 10px que representaría el 62.5% de los 16px:

100%	16px
62.5%	x
x = (62.5*16) / 100
x = 10px

Yo también coloco esa misma regla CSS global (*) en mis proyectos a exepcion del font-size, ya que me gusta más manejar los REMs en base de 16px.

Como ejemplo, me he encontrado con estos problemas donde manejar esta base las puede resolver:

  • Me gustaria que este elemento tuviera un espacio mas pequeño.
    Coloco 0.5rem = 8px.

  • No me convence, quizás mas pequeño?
    Coloco 0.25rem = 4px.

Ésto me permite ajustar dimensiones pequeñas que luzcan bien y he preferido los resultados que ésta practica ofrece. Así solo necesito memorizan una sola regla y me ayuda a ser más consistente en mis proyectos.

  • MEDIDAS

    "Por defecto el navegador coloca los textos en 16px"

    • ANCHO width
    • ALTO height

    Medidas Absolutas: el tamaña no varía

    • PIXELES p { font-size: 18px; }

    Medidas Relativas: cambia el tamaño según la relación de aspecto

    • PORCENTAJES p { font-size: 50%; }
    • EM: toma el tamaño de fuente que tenga el padre directo (da problemas al tener muchos elementos anidados)
    body {	font-size: 20px; }
    h1 { font-size: 2em; /* 2x20=40px */ }
    
    • REM: toma el tamaño de referencia del root de nuestro proyecto (en este caso: 1rem=16px)
    html { font-size: 62.5%; /* seteamos: 1rem=10px */}
    p { font-size: 1.6rem; /* 1.6rem=16px */ }
    

Es magistral como Diego hace entender todo de una manera natural en nuestras mentes, definitivamente platzi ha sido la mejor inversión que he echo en mi vida.

Este video es excelente complemento para la clase REM y EM | Ejemplos prácticos

Pueden tambien crear un programa en python que les simplifique un poco el proceso de calculo, aunque no es tan complejo pero pueden probarlo:

x= int(input("Digite los pixeles que quiere convertir a medida rem: "))
y=10
h=x/10
l=str(h)
ldos=("rem")
t=("Su resultado es: ")
print(t + l + ldos)
print("En caso de obtener un cero como decimal; descartelo, y fijese solamente en el entero")

Copien y peguen en un archivo .py y lo ejecutan, es algo básico que recuerdo, y por eso es melo python ❤️

  • Les presento el Autor Intelectual de este truco 62.5% el se llama Jonathan Snook creo la metodología SMACSS

  • El método de Snook es ciertamente más fácil de descifrar, pero el El desarrollador Harry Roberts presenta un argumento bastante convincente para evitar el truco del 62.5%.

  • Metodología de Harry Roberts BEMIT Llevando la Convención de Nomenclatura BEM un paso más allá

  • Más metodologías aquí
    Jonathan snook

    Harry Roberts

cuáles serían las medidas de h1, h2, h3, h4 etc en rem?

Ésto tiene que venir en todos nuestros archivos CSS.

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
   }
html {
	font-size:62.5%;
   }

En visual studio code hay una extension para convertir pixel a rem

Se llama PX to REM, y lo que tengas en px con el comando ALT GR + Z te coloca en rem las medidas (Yo instalé la de Marco N)

% Porcentaje, puede ser relativo frente a varios elementos, si trabajamos con fuentes es relativo a la fuente, pero si lo aplicamos a width es relativo a la anchura del contenedor, por poner dos ejemplos.

em Relativa al tamaño de la fuente del elemento actual

rem Relativa al tamaño de la fuente del elemento raíz (HTML)

si hacemos la regla de tres:
16px = 100% entonces 62.5%=10px
1 rem = 10px

Pocas palabra:

10px = 1 REM
16px = 1.6 REM
20px = 2 REM
26px = 2.6 REM
30px = 3 REM

NOTA:

Pixeles se usa para tamaño de fuentes.
REM se usa para tamaños relativos en contenedores.

No entiendo por que en la clase 35 Medidas REM de definitivo de HTML-CSS, el profesor habla que ya somos expertos desarrolladores. Yo ando mas perdido y se supone que es lo básico.

En este tipo de cosas es que una dice que vale la pena Platzi, que en aprender y sobre todo entender el por qué de las cosas meticulosamente es importante. Esto es de una gran importancia y facilita enormemente el desarrollo.
Quedé 🤩

El truco de colocar el html font-size:62.5%; es lo maximo asi 1 rem equivale a 10px con lo cual si quiere algo de 16px solo colocas 1.6rem si necesitas algo de 32px solo colocas 3.2rem mejor dicho corres la coma un espacio a la derecha en el numero normal de pixeles que pondrias en condiciones normales…genial!!!

Si 16px son el 100% , entonces 10px que porcentaje es?
Para calcularlo usamos la regla de tres, como sigue:

x=( (10px) (100%) ) / 16px
x=62.5%

Y esta es la razón por la que se coloco 62.5%

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;/* esto hace que el valor de 1 rem sea equivalente siempre a 10 pixeles asi podemos trabajar de una forma mas rapida sin hacer tando calculo. */
}
p {
    font-size: 1.6rem; /* siempre va a trabajar com base a nuestra etiqueta root, osea raiz osea html y el font size html tiene predeterminado el font-size de 16px, tomara este valor y lo multiplicara por el valor que le demos a rem. */
}
main div {
    font-size: 1.6rem;
}

/* se recomienda utilizar rem como medida para proyectos css tener en cuenta que en este caso un rem serian siempre 10px esto para manejar medidas relativas que se adapten al navegador*/
User REM tiene una ventaja sobre PX y es que los usuarios que usan un tamaño de fuente predeterminado más grande, por ejemplo, en la configuración de su navegador obtendrán el tamaño de letra siempre correctamente, mientras que px no escala. En otras palabras, usando rem para font-size, agrega soporte para temas de accesibilidad a tu sitio web.

Queda claro que en CSS también deberíamos tener un texto de inicio, así como en html.

**Medidas REM **

REM siempre va a tener referencia al estilo que tenga la etiqueta root o al root de nuestro proyecto que es html, en este caso html (nuestro root) da por default el font-size de 16px así que siempre un REM va a ser igual a 16px a diferencia de EM que depende de la dimensión marcada en su padre directo.

Un REM siempre va a ser igual a 10px por ejemplo si quiero 16px vamos a poner de medida REM 1.6px y así queda de 16px.

REM se usa principalmente en fuentes y medidas de contenedores.

En conclusión REM es mucho más sencillo que EM y tenemos el control completo de cuanto es un REM.

35.-Medidas REM

La más recomendada. Rem SIEMPRE va a tener de referencia a la etiqueta root, en este caso siempre será el html, por lo tanto siempre será igual a 16px.

Un truco para usar rem como si fueran pixeles es

html{
    font-size: 62.5%;
}

p{
    font-size: 1.6rem;
}

¿Qué estamos haciendo aquí?

Estamos seteando una dimensión de fuente de 62.5, quiere decir que 1rem va a ser igual SIEMPRE a 10 pixeles. Si quiero 16 pixeles pongo 1.6, si quiero 20 pixeles pongo 2 rem y así sucesivamente.

Como buenas prácticas debemos usar pixeles para tamaños de fuente y para ciertos tamaños relativos en contendores, por eso usamos rem.

El tamaño de las fuentes debe ser relativo. Como lo explica Andrés Galante en Accessible Font Sizing, Explained muy seguramente el usuario va a cambiar el tamaño de la fuente.
.
Me gusta mucho unos de los headings que utiliza:
.

Think about proportions, not size

.
Pensemos mejor en que proporción nuestro texto va a escalar dependiendo del tamaño de fuente del documento (el cual los usuarios con temas de visíon van a cambiar).
.
Andrés nos da 3 recomendaciones para garantizar la accessibilidad y el que más me intereso es el número 2:

:root {
	/*No son pixeles, son proporciones. El tamaño de fuente por default es 16px, si el usuario cambia ese tamaño las variables escalaran de manera proporcional.*/
	--font-size--small: calc((14/16) * 1rem); /*14px*/
	--font-size--default: calc((16/16) * 1rem); /*16px*/
	--font-size--large: calc((24/16) * 1rem); /*24px*/
}

.
De manera que si un usuario con temas de visíon cambia el tamaño de fuente a 25px los valores de las variables escalarían de esta manera:
.


--font-size--small = 21.875px
--font-size--default = 25px
--font-size--large = 37.5px

Un pequeño truco para entender esto es compararlo con los aspect ratios para ímagenes:
.

small 14:16
default 16:16
large 24:16

Cuál es la ventaja del rem frente a los px? Dicen que es porque es una medida relativa… Pero rem no depende del tamaño de las pantallas. Rem depende de los px. Si en html el font-size es 16px y luego utilizo rem 2, es simplemente una multiplicación (16x2) y serían 32px (lo veas en celular o en un televisor). Pero esa medida no cambiaría según el tamaño de pantalla porque… son 32 px!
Entonces por qué querría usar rem y no px? Acaso no es sólo una simple multiplicación?

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.

rem siempre va a tener la referencia al estilo que tenga la etiqueta root o el root de nuestro proyecto, que en este caso siempre va a ser nuestro html.

Por defecto el navegador le agrega estilos por defecto a nuestro html y le asigna un tamaño por defecto al font-size de 16px, es por eso que 1rem = 16px

Si queremos aplicar rem de una forma mas sencilla para no tener que calcular cuantos px son equivalentes para el rem vamos a realizar el siguiente truco el cual consiste en reescribir en css nuestro html agregando lo siguiente

html{
    font-size: 62.5%;
}

Esto lo que hará es darle a el html un valor de 10px ya que 16px - 62.5% = 10px, y con este truco 1rem = 16px.

De esta manera si queremos tener un tamaño de 32 pixeles pondríamos 3.2 rem, si a una etiqueta le asignamos 2rem este hará referencia a 20px, o si por ejemplo le damos un valor de 1.5rem su valor será de 15px, con este truco nos evitamos la fatiga de realizar tantos cálculos Ahora ya podemos utilizar este truco para empezar a utilizar rem como tu medida en todos los proyectos y css que tu hagas.

Por lo tanto la siguiente estructura es la estructura final que siempre tendrás que manejar en tus archivos de css, tenemos que reiniciar em margin y padding por defecto y poner nuestro estilo en el box-sizing con el modelo de caja para que no se tengan problemas con el tamaño de los contenedores y setear el tamaño de fuente en la etiqueta html en 62.5%, con eso yo ya puedo utilizar rem como si fueran mis pixeles teniendo siempre en cuenta cual es la dimensión esperada.

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;

}

html{
    font-size: 62.5%;
}

Como empezarán a manejar su root a partir de ahora?

html{ font-size: 62.5%;} para que 1 rem sea igual a 10 px
ó
html{ font-size: 6.25%;} para que 1 rem sea igual a 1px

para ustedes que es más cómodo?

Apuntes de clase:
REM -> Medida RELATIVA que toma como referencia la medida que trae el HTML. Si la medida de la fuente de un párrafo heredada de HTML es 16px, un rem entonces mide eso, 16px.
Tip: Para facilitar el uso de la medida REM, podemos darle a HTML un font-size de 62.5%. Así 1rem equivaldrá a 10px facilitando nuestros cálculos. Esto se recomienda para todos nuestros proyectos.

Chicos, no se trata de casarse con una determinada manera de hacer CSS, se trata de entender en que ocasiones usar que unidad de medida, y lo ideal es siempre usar ambas en conjunto, he aquí un articulo que explica como utilizar ambas unidades a nuestro favor

https://cybmeta.com/em-y-rem

sobre todo en diseño responsive, y es comveniente que aprendamos a usar estas unidades aun que sea un poco más difíciles de aprender en un principio.

¿Es buena práctica poner el font-size en el selector universal? En una clase anterior creo que había dicho el profesor que era una referencia a la etiqueta html

MEDIDA REM

  • rem es una unidad de medida dentro de css, que nos permite utilizar a nuestro html como guía en cuanto a los tamaños.

¿Cómo funciona?

  • Muy fácil, lo primero que debes entender es que, por ejemplo, si sabemos que siempre por defecto nuestro tamaño de fuente es de 16px(proveniente del documento html), pues entonces 1rem es igual a 16 pixeles, ¿fácil no?

UN TRUCO QUE TE VA A SALVAR LA VIDA


html {
  font-size: 62.5%;
}

p{
	font-size:1.6rem;
}
  • Esto que estas viendo, es sencillo de entender. Lo que hacemos aquí es decirlo a nuestro documento html que tenga el valor de ‘65.5%’ en la propiedad font-size, pero… ¿Por qué hacemos esto? Pues hacemos esto porque de esta manera ese valor se convierte en ‘10px’ (no olvides que sigue siendo un valor relativo), entonces tenemos que si nuestro documento html tiene como base 10px = 62.5%, 1em va a ser igual a 10 pixeles, y de esa manera si necesitamos que nuestro texto mida 30 pixeles, para nosotros serán 3rem.

Aqui nos damos cuenta de algo tan maravilloso para poder controlar de manera adecuada, y FACIL el tamaño mediante el uso de rem.

Entendido Rem
Similar a Em, pero toma como referencia la medida de la etiqueta HTML.

Al utilizar rem estamos optimizando código o algo por el estilo? Sigo pensando que es mas intuitivo usar pixeles. Es mas facil escribir .25px que .025rem

Tengo una duda. Desde hace unas clases vengo usando el normalize, ¿debería seguirlo usando pero añadir el font-size al 62.5%?

Cuando están haciendo ejemplos o pruebas en html y para no molestarse en pensar que colocar de texto, solo escriban:

lorem. //Se genera un texto aleatorio

o 

lorem5. //Genera 5 palabras de texto aleatorio

Estupendo.
Siempre utilizo porcentajes y px. Pero, ahora comenzare a usar la medida rem.

La unidad REM sigue siendo relativa, aunque logremos hacer similitud con los pixeles.
.
Buena práctica para poder crear sitios web adaptables.

100% rem 💚

Pregunta: ¿No es lo mismo si le pongo a mi html{} un font-size de 10px desde un inicio?

La mejor clase de CSS de mi vida. Thanks

Increíble darme cuenta del poder que da REM antes utilizaba solo px y en la parte de responsive sufría mucho…ahora REM me dice hoy … PARA DE SUFRIR :p

wat? :v

Sobre cómo usar px, em, rem y % en "Responsive Design"
8 de junio de 2014 4 minutos de lectura
CSS

Estamos en una época en la que convivimos con dispositivos con pantallas de múltiples tamaños. Esto obliga a los desarrolladores a cambiar la forma de crear las interfaces en la web. Por eso se creó el concepto de responsive design.

El diseño responsive es crear interfaces que se adapten a los distintos tamaños de pantalla. Esto se hace utilizando las media queries de CSS, y apoyándose en los em y los porcentajes. Sin embargo, a pesar de que mucha gente dice que hay que usar em y porcentajes, muy pocos son los que de verdad aplican esta regla.

El próximo paso consiste en abandonar los píxeles definitivamente. Creando interfaces usando solamente em, rem y porcentajes podremos crear sitios que se adapten no solo a los diferentes tamaños de pantalla, sino también a las necesidades concretas del usuario. Una cosa a tener en cuenta es que el usuario puede definir en su navegador el tamaño de letra por defecto. Si definimos con px el font-size base, estamos limitando la configuración del usuario, y una cosa que tenemos que tener en cuenta es que al final el usuario es el que decide cómo quiere consumir el contenido.

Me parecio necesario , si quieren leer más pueden ver lo aquí : https://abalozz.es/sobre-como-usar-px-em-rem-y-percent-en-responsive-design/

RESUMEN CLASE 35:
MEDIDAS REM

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 REM</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <main>
        <p>Soy un texto ejemplo</p>
        <div>
            <p>Soy otro texto</p>
            <div>
                <p>Soy otro texto</p>
                <div>
                    <p>Soy otro texto</p>
                    <div>
                        <p>Soy otro texto</p>
                    </div>
                </div>
            </div>
        </div>
    </main>
</body>
</html>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
}
p {
    font-size: 1.6rem;
}
main div {
    font-size: 1.6rem;
}

rem es una de esas herramientas que son un tesoro escondido

como buenas practicas utilizar REM para los contenedores

Información resumida de esta clase
#EstudiantesDePlatzi

  • rem siempre se va a referenciar a la etiqueta html, es decir el tamaño siempre lo va a definir el que está especificado en la etiqueta html que por defecto es de 16px

  • Definiendo el font-size en la etiqueta html de 62.5% logramos que un rem es dé 10px, es decir, nos ayuda con el cálculo del tamaño

  • Para buenas prácticas debemos utilizar px en tamaños de fuentes y apoyarnos en el rem para definir cuantos px vamos a usar

  • En todos nuestros archivos de CSS reiniciamos el padding y margin, también poner utilizar bos-sizing

Se que parece un poco complicado de comprender pero hice mi analogía de porque ir de 10px es mejor y como encontrar los 10px que menciona el profesor Diego en su clase.
.

  1. Considero que es mas fácil manejar los px, de 10px en 10px, o de 1rem en 1rem
  2. Realizar una regla de 3 para encontrar el valor que representa 1rem en el nuevo seteo de 62.5%

PIXELES-----------------PORCENTAJE
16px---------------------------100%
xpx-----------------------------62.5%

  • 1rem = (62.5x16)/(100) = 10px
*{
  padding: 0%;
  margin: 0%;
  box-sizing: border-box;
}
main{
  background-color: rgba(165, 42, 42, 0.381);
  border: 5px solid rgba(134, 93, 93, 0.283);
}
/* Un em siempre va basado en el padre directo */
.em {
  font-size: 1.5em;
}
.em div{
  font-size: 1.5em;
}

/* Un rem siempre va conrrespecto al root, osea al html. */
html{
  font-size: 62.5%;
}
/* Poniendo el html en 62.5% un rem siempre va ser 10px  */

rem div{
  font-size: 1.6rem;
}

Esta parte fue lo mejor

html {
   font-size: 62.5%;
}

p{
   font-size: 1.6rem;
}

Como me hubiera servido entender esto antes…

rem es lo maximo jajajaja

Tengo una duda.
Si tengo dos etiquetas P y a la primero le quiero dejar una medida de 1rem y a la segunda una de 2rem, y hago el llamado desde mis CSS correctamente, ¿Por qué no se me aplica esa diferencia de medida?

Si te preguntas por que 62.5 es una simple regla de 3, el valor por defecto del font-size es de 16px por lo que equivale al 100% si queremos que el valor de 10px en % solo debemos hacer la regla de 3, la cual queda de la siguiente forma:

Ahora 1rem equivale a 10px, por que podemos utilizar base 10 para hacer las multiplicaciones en el incremento de rem, ejemplo 1.25rem = 10*1.25 = 12.5px

Medidas REM

rem siempre va a tener de referencia el root de nuestro proyecto html. Por lo que 1rem siempre será 16px. La medida rem no es acumulable.

No es necesario que siempre realices el cálculo para saber cuánto mide tu rem.

``
html {
    font-size: 62.5%
```;
}
```
Cambiando el valor principal de html, tendremos controlado el valor de nuestro rem.

```
main div {
    font-size: 1.6rem;
}
```
Si aplicamos la misma medida a otras etiquetas, nos dará el mismo tamaño, porque el valor de donde parte el cálculo indicado es el mismo. 

> Tip:

```
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
}
```
Como buena práctica, debes resetear siempre los estilos por defecto que vienen en el navegador para que puedas agregar los tuyos. Además, colocar el tamaño de fuente de html en 62.5% para que valga 10px y así sea mucho más fácil calcular los valores que usemos con la medida rem. 

En estos momentos es donde la vida cambia

el truco de la medida de rem sin querer antes yo puse en html el font size en 1px y despues mi rem eran en px jaja osea 16rem o a si jajaja si a alguien le ayuda saludos.