Que rayos son las unidades EM, REM y como se utilizan | Tutorial CSS

[@FalconMasters]

Espero que este video les pueda servir para aprender sobre EM y REM. Si te gusto el video por favor dale manita arriba 👍 Video con la practica completa: kzbin.info/www/bejne/aJynZZ2Hqqylr7s

[@johnjlac9379]

Gracia amigo de hecho acabo de coger el curso de diseño web desde cero en udemy vamos a ver que tal me va y llegar a tu nivel

[@FalconMasters]

@@johnjlac9379 Estupendo! Te aseguro de que aprenderás mucho.

[@manuelh.poncebarbosa1999]

Haz la práctica pliss!!! Me interesa un chingo aprender de diseños responsivos

[@FalconMasters]

@@manuelh.poncebarbosa1999 Subiré el video la próxima semana.

[@johnjlac9379]

@@FalconMasters gracias te molestar si algo no entiendo jjjjjjjj sorry

[@MiikeEnCiel]

Es el vídeo en español con la mejor explicación y ejemplificación que he visto en KZbin.

[@migueljara9399]

Desde Mozilla: En definitiva, la unidad rem significa «el tamaño de letra del elemento raíz». (‘rem’ viene de «root em»). Los elementos dentro de un elemento con una clase de rems toman su tamaño del elemento raíz (). Esto significa que el tamaño de letra no aumenta en cada nivel sucesivo de anidamiento. Aunque en algunos comentarios leí que el body hereda los valores de la etiquta html, pero igual, yo sólo me guiaría por html y ya.

Por Fin, ahora si entiendo esto de rem y em. Nunca comprendía como usarlo, y se ve que está genial. Ya con la extensión en el visual studio code, es una pasada. Gracias Carlos por el aporte. Entendiendo da gusto trabajar.

[@virtualmarcas]

Tienes una excelente pedagogía había visto mucho videos sobre rem y em pero nunca había entendido tan bien y rápido como con tu video GRACIAS.

[@FalconMasters]

Me alegra mucho que este video te haya sido de ayuda para entender mejor que son y como funcionan :D

[@joseflores-cx5ld]

em: es relativa al tamaño de fuente de padre mas cercano rem: es relativa al tamaño de fuente del html (root) no del body por cierto buen video.

[@barondls8134]

Jajajaja estuve pensando lo mismo durante todo el video, ya que, la página oficial lo describe así, y quién pelea con lo que es oficial? jajajjaa

[@barondls8134]

Aunque analizando, me he dado de cuenta que el Body hereda las funciones del Root, entonces cualquier modificación en la raíz afectaría al Body, por lo tanto este men está en lo correcto, aunque sería perfecto que lo dijera en el video, para no liarnos con la información oficial.

[@fabinmunoz8314]

@@barondls8134 Hola como vas? Tienes toda la razón, el body es afectado por el root mientras no se especifiquen las propiedades de body...y si, es bueno que especifiquen bien, ya que para el que llega nuevo a este mundo del css pensara que ambos valores son las misma cosa. Saludos men!!!

[@ndreyesweb2012]

esq creo que el chavo no sabe que primero debe explicar el significado y despues la practica.

[@melvin.g]

@@barondls8134 ste men

[@dsalinas81]

Infinitas gracias, por fin puede comprender el concepto y lo útil que es !!!

[@hec_gph7081]

este es el video definitivo para entender las unidades de medida rem y em.

[@juanluistorres1559]

Excelente vido Carlos, por fin me quedo claro como usar estas medias! Estaria genial un video usando y explicando las medidas VH y VW :D Gracias y saludos xD

[@MasterWilliamVasquez]

carlitos y si usamos los vh para los height y los vw para los width ya que asi logramos un tamaño que sea acorde a la pantalla y se vea igual en todas

[@enriquemolinasantamaria2303]

Acabo de ver tu video... Chaval... ¡Eres una máquina! Muchas, muchas gracias por tu generosidad.

[@FalconMasters]

Muchas gracias a ti por ver mi video.

[@d-landjs]

Pude comprender mas la relación de los em y rem!!! Gracias Arturo!!

[@athlonll]

Una de las mejores explicaciones que he visto de este tema .. Gracias por siempre estar ayudando y compartiendo tus conocimientos . Y por favor sigue asi ! ..

[@maximilianodelatorre2513]

Sos un genio! Me encantó no tenia ni idea que para eso servía!!!

[@silviojuarez4611]

Despues de tantos años sigue siendo el mejor explicado en español, muchas gracias

[@FalconMasters]

Muchas gracias!

[@brunocalderonmontero2574]

hola que inspector usas para ver la tipografia

[@SR2Producciones]

Carlos, mil gracias por todos tus tutoriales y cursos, son excelentes. 🇨🇴 un saludo desde Medellín, Colombia. Att: Santiago Ramirez 😉👍🏻

[@DavidRodriguez-uj4ls]

Muy buen vídeo, nunca había trabajado con rem, solo con em, pero creía que tomaba como medida la del body, estaba equivocado, ya me puedo acostar sabiendo algo más :D

[@zenzvm5427]

Que maravillosa explicación, muchas gracias me quitaste todas las dudas

[@vanessamc3342]

Falcon puto amo!! Eres uno de los mejores youtubers programadores que hay en KZbin!!

[@FalconMasters]

Gracias :D

[@dalifarol124]

Muchas gracias Falcón... No me pierdo tus vídeos ... súper bien explicado ... Saludos

[@FalconMasters]

Muchas gracias!

[@mishelrodri]

Al fin alguien que lo explica super cool

[@maximojuniorapazachirhuana9641]

Buena explicacion , dentro de unos dias comprare tu curso :D, habia dejado de diseñar y fui mas en el backend y olvide lo divertido que era. :D

[@FalconMasters]

El frontend es genial, es muy divertido y creativo.

[@codigosdelfuturo]

Excelente vídeo. Muy explicativo y va directo al grano. Este vídeo lo compartiré desde mi Twitter.

[@FalconMasters]

Muchas gracias!

[@ezequielkozlov788]

Mejor explicado imposible, muchas gracias

[@joakingart8741]

Gracias, excelente video. Me gusto mucho que fuiste muy directo al grano. Ahora entiendo para que funcionan estas unidades. Las aplicare en mi pagina para optimizar el código y no ser tan redundante.

[@FalconMasters]

Me alegra que te sirviera el video!

[@genecles]

Hola. Genial como siempre tu contenido!!! Ténía cierta idea del funcionamiento de las medidas pero con este video me quedó más claro aún. Gracias!!!

[@FalconMasters]

Me alegra escuchar eso. Saludos!

[@henryhcc]

Excelente video!. Gracias por compartir

[@RubenERangel]

Excelente Falcon, muchas gracias ya entiendo como hacer el responsive de manera simple. Espero el video de CSS grid

[@juaneduardo9678]

Gracias por esta gran solución!!!! Un gran 👍

[@gabrielgomez4212]

Excelente video, muchas gracias

[@aquanova2024]

Muy buena explicación me ayudo mucho a entender los em y rem. Te felicito por tu gran trabajo. Saludos...

[@FalconMasters]

Gracias!

[@emanuelmejia4525]

Gracias por la explicacion, ahora me quedo mas claro este tema :D por cierto, estaria bueno que hicieras un video sobre BEM CSS, saludos !

[@romeobetances7964]

Super amigo, siempre aportas, tu contenido es super interesante, espero que sigas así.

[@FalconMasters]

Gracias!

[@Zamyto2]

yo estaba acostumbrado a trabajar con porcentajes, mi duda es ahora con rem y em igual son adaptativos según el tamaño de pantalla? Gracias

[@kikabyatpaau836]

Excelente explicacion, gracias.

[@kevtech9475]

Uff que potente estas unidades de medida, Gracias a ti pude comprenderlo! 🙌

[@eliasvenegasolivares9947]

Hola Carlos Arturo, felicidades tienes una forma muy practica para explicar los temas. aprovecho el momento para hacerte una consulta, del mismo modo como reducimos el ancho de la pantalla con width (%) quisiera limitar el alto pero no me funciona el height (%) por que al hacer scroll el contenido sigue corriendo hasta la posición cero y lo que necesito es por ejemplo que el contenido desaparezca en la posición 50px, gracias por tu respuesta.......

[@FalconMasters]

Hola Elias, no entendí muy bien a que te refieres con lo del scroll y la posición. Pero lo de la altura te puedo decir que el % que le pongas, va a ser el % respecto al contenedor padre. Otra opción es usar porcentaje con respecto al tamaño de la ventana. Eso lo puedes hacer usando la medida vh, por ejemplo height:50vh; te pondrá el 50% del alto de la ventana.

[@eliasvenegasolivares9947]

@@FalconMasters gracias por responderme, lo que necesito en realidad es limitar el alto de mi navegador no de una ventana así por ejemplo cuando decimos section { width 90% overflow: hidden; margin auto; } esto hace que el ancho del navegador se reduzca horizontalmente y los laterales aparecen vacios,,, necesito lo mismo pero verticalmente.

[@FalconMasters]

@@eliasvenegasolivares9947 Entonces es mejor usar flexbox para eso. Pone margenes a cada uno de los lados.

[@eliasvenegasolivares9947]

@@FalconMasters Hola Carlos Arturo, una consulta como hago para que cada vez que hago click en una de las opciones del menu por ejemplo: Necesito que mi section #about-us se recargue siempre en la posicion top: 100px; y no en top: 0; como lo hace siempre, pero ojo cada vez que le haga click a la opcion del menu.

[@josecaramauta]

muchas gracias muy buena explicación

[@jonasefanvasquezyanez1834]

Muy buen video y lo explicaste muy bien. muchas gracias! super util.

[@aaronhulkito]

like que buena ayuda lo vere todo completo gracias a ti mi pagina web me esta quedando increíble

[@FalconMasters]

Estupendo! me alegra escuchar eso.

[@MAURO9991113]

Me asalta una duda, estoy revisando este tema de las medidas EM y si bien veo que siempre se hace mencion a que son relativas al tamaño de fuente del elemento padre mas cercano, según comprobación estoy deduciendo que en primera instancia toma el font-size del mismo elemento. Se cumple siempre eso ¿?

[@anell0784]

Muy buen video! Por fin ya no me confundiré con esto de los EM y los Rem 🤗

[@cristiani4nm929]

Excelente explicación

[@AudioMezcla]

Excelente vídeo, gracias!

[@JulianAnime]

pero .contenedor h1 tiene que estar en cascada para que lo herede como contenedor padre? o puedo hacer el H1 sin estar en cascada con en class contenedor?

[@cleidysbrooks]

Excelente video de gran ayuda. Gracias Carlos Arturo.

[@jmcharro9947]

Excelente tutorial como siempre!!! Yo creo que para simplificar el uso de em es conveniente usar la propiedad font-size en px para el padre más externo de un conjunto que queramos usar como modulo. De esta forma la referencia que ese bloque tiene para usar los em es más clara. Tu como sueles hacer Carlos Arturo???

[@notf0und]

What I was looking for!

[@serasmaestroconconstancia]

So now you can change your nick name haha xD

[@shi2866]

@@serasmaestroconconstancia jaja x"D

[@enriquesanabria2366]

el mejor profe lejos

[@goldnajera2215]

Excelente explicación gracias por transmitir tu conocimiento, saludos

[@DR-op2pe]

Buenas tardes falcón, tengo una dudita quisiera que me orientaras un poco si es que se puede, tengo mi página en desarrollo,mi página es responsive, a excepción de un detalle ,cuando la cargar en otra computadora ya sea de escritorio o latpto las imágenes se miran más pequeñas o más grandes también los párrafos y h1,h2, en mi pantalla está todo super acomodado, pero al visualizar de otra máquina cambian las dimensiones o resolución creo yo, y se miran más pequeñas o grandes... Algún tip o cosita que pueda resolver este problema? O algún vídeo tuyo dónde expliques algo por el estilo...

[@mauriciodurcak8539]

impresionante la explicacion!!!! crack

[@FalconMasters]

Gracias!

[@BillRocha]

Excelente explicação!! Vou recomendar para meus amigos que estão começando em CSS! Obrigado.

[@manugc6103]

si a la etiqueta html le pongo un font-size de 10 puedo trabajar todo con rem, sería más fácil no?

[@abelpronet]

Hola Carlos! muy bueno el video. En mi caso yo lo trabajo colocando el font-size en 62.5% en la etiqueta de html y lo trabajo todo con rem, me parece más cómodo (1 rem = 10px). Te quería comentar que me ha gustado la configuración de los colores que utilizas en VS Code. Tendrás algún enlace para saber cómo lo has configurado para que se vea de esa manera? me gusta que el color de los números se diferencien de las unidades. Gracias!

[@FalconMasters]

Es buena opción también, la verdad es que hay muchas formas de trabajarlo y cada quien puede usar la que le guste y le sirva. Sobre mi tema, solo tengo el tema de Ayu Mirage, es el que se encarga de todos los colores. También tengo un video sobre el si quieres verlo.

[@abelpronet]

@@FalconMasters Gracias! ya he instalado el tema! está super genial!!!

[@FalconMasters]

@@abelpronet Lo enseño en este video si mal no recuerdo: kzbin.info/www/bejne/r2isXp-MfcuDd5Y

[@abelpronet]

@@FalconMasters perfecto! lo voy a ver a ver que truquillos de mas le saco ya que lo acabo de instalar y está genial! un saludo

[@narushi1940]

Buen video. Muy didáctico.

[@wandelwilsonandrex4059]

Me encantó el vídeo ahora sí lo entendí como tal, gracias

[@FalconMasters]

Me alegra escuchar eso. Gracias a ti por ver mi video.

[@axelosvaldo1343]

que increíble, fabuloso! gracias falcon!!

[@raul7254]

Muy bueno, ahora veo la utilidad de los preprocesadores de css para no tener que convertir las unidades a mano.

[@FalconMasters]

Es cierto

[@unOscarMas]

Por fin lo entiendo, muchas gracias

[@frankmdv]

Excelente, gracias amigo.

[@Bcorazon]

nueva suscriptora! muchisimas gracias :D

[@FalconMasters]

Gracias!

[@AxelMonsalve]

Wow, gracias 👍. Grandes aportes amigo!!

[@FalconMasters]

Gracias

[@EngCarlosTello]

informacion de calidad. Gracias falcon masters.

[@SolucionesELP]

Hola buen video; otro tema que podrías tratar es : vw, vh, vmin y vmax ; ya entendí pero tu explicas muy bien te caería en maravilla un video de eso; muchas gracias por los tutoriales.

[@petewentzivan]

Hola. Disculpa, en un video de youtube (no recuerdo cual, olvide guardarlo) con ayuda de sass usaban una fórmula, en el "font-size", que indicaban los valores máximos y mínimos del tamaño del contenedor; es decir el contenedor tenía: width: 100% max-width: 800px Donde el 100% del width se ajusta al tamaño de la pantalla que sería inferior a 800px (Por decir algo) Y aquí es donde sabiendo el máximo y el mínimo del tamaño de la pantalla podias hacer una fórmula, en "font-size", usando "rem" o "em" para calcular con base a la pantalla el tamaño del font. La verdad no recuerdo cómo era la fórmula y soy muy torpe para que mi cabeza intente idear la. Solo recuerdo que no era tan complicada. No se si me podrías ayudar con este tema, intentando averiguarlo tú o sí lo sabes hacer un video al respecto. Por favor y gracias.

[@FalconMasters]

Hola Ivan, a decir verdad nunca he visto una formula así en SASS, sin embargo si quieres conocer el tamaño de la pantalla es mejor hacerlo con JS, es mas fácil que complicarte con formulas.

[@yousilcas]

Pregunta: que addon esta usando para ver tipografia?

[@yousilcas]

quiero decir, para ver el tab de tipografía al momento de abrir el dev Tools de Chrome.

[@CHINIQUEMIX]

woww al fin compredi las unidades rem y em muchas gracias

[@FalconMasters]

Genial, me alegra mucho escuchar eso!

[@julianvelez6563]

Excelente falconmasters

[@FalconMasters]

Gracias

[@misaacgamez658]

entonces no es para qeu en dispositivos con alta densidad de píxeles haga que se vean bien?

[@brunorojo7655]

gracias por el video

[@kevinguzman1929]

Excelente video, muchas gracias!. Y aprovechando quería preguntarte que plugin o configuración estás usando para css en vsc?

[@FalconMasters]

No uso ningún plugin ni configuracion para CSS salvo prettier

[@kevinguzman1929]

@@FalconMasters muchas gracias!

[@moisesosegueda2048]

ohh excelente video, era algo que no entendia y ahora si! :)

[@FalconMasters]

Estupendo!

[@harrinsonA]

Una pregunta, el truco de :root{ font-size: 62.5%; } para que el tamaño de fuente sea de 10px y despues con eso en mente se trabaja con rem. Que opina de eso? es bueno, es malo?

[@FalconMasters]

Es un buen truco, yo personalmente no lo uso y desconozco cuales ventajas o desventajas reales que tenga.

[@leodexe]

@@FalconMasters la ventaja es que no dependes de una calculadora o extensiones para sacar la medida que quieres porque al hacer el font-size de 62.5% puedes inmediatamente hacer cálculos con 10px por múltiplos de 10 lo que lo hace mucho más fácil.

[@luchorap85]

Excelente

[@axelosvaldo1343]

Falcon en tu curso de Udemy se ve todo esto y mas? estoy seriamente interesado en adquirirlo

[@FalconMasters]

Si, en mi curso vemos mas cosas y ademas con proyectos.

[@ghx_xxsh6962]

bro eres un crack acabo de ver tu curso de html

[@FalconMasters]

Gracias! espero que hayas aprendido mucho en el curso.

[@adriandev6516]

Bestial 😃👍🏻

[@JeffreyDeveloperCOL]

Genial

[@informatica8545]

Disculpa tengo una duda porque cuando uso rem me sigue tomando el valor de contenedor y no del body y gracias por el video aprendi mucho en verdad gracias

[@edgarcruz106]

X2 tengo la misma duda, yo entendí que 1rem equivaldría al tamaño de font-size declarado en el body y no es asi

[@regiser1196]

hay algo que no entiendo, por qué pones el max-width si ya pusiste el width?

[@compiller6637]

saludos maestro

[@JorgeSeenathOfficial]

cada vez que subo el html a app server me sale solo el html y no el css se le va todo el estilo... porfa puedes hacer un tutorial para ver todas los proyectos que ya hemos hecho

[@slaveofthecode]

@FalconMasters estuve probando y siguiendo tu video, y no se comporta igual. He notado que REM hace caso al font-size que se tiene seteado en el tag HTML y no el del BODY. Esto es asi? cambio algo o que paso? Saludos

[@FalconMasters]

Es así, en realidad es como tu dices, hace caso al tag del HTML, pero normalmente no lo saeteamos por eso se suele usar body, aunque también he visto que para solucionar este problema se usa :root con el body de los 16 px.

[@slaveofthecode]

@@FalconMasters Muchas gracias por responder.

[@quisbertlopezjuan7292]

Hola, cuando pongo por ej font size : 50 px, no me lo toma. Puse varias medidas y actualizo mi pagina y no cambia

[@FalconMasters]

Hola quisbert, tiene que ser sin espacios así: font-size: 50px;

[@personzen8028]

Thank you

[@andymanuelreyesdelrosario4178]

Podrias hacer un video explicativo del posicionamiento de los elementos con CSS 🙏🏾

[@FalconMasters]

¿Te refieres al posicionamiento absoluto y relativo?

[@andymanuelreyesdelrosario4178]

@@FalconMasters síii

[@federicoaldana5952]

Genial.

[@johnjlac9379]

Esta bueno el vídeo sería de ver como lo haces en la página y usarlo

[@rociococcia2603]

Si se quiere hacer páginas responsive, lo único que habria que utilizar sería medidas em y el query? Si se hacen desde 0 sin utilizar ninguna libreria.

[@santiagoaisa23]

Buen video

[@LocalGhost_8080]

Woosh! Thank you so much!

[@juandaniel8139]

Utilizo mucho el rem y pongo un font-size al html de 62.5%

[@Charly__UY]

Muy buena info!! A proposito... he visto este video, y he visto el primero que has puesto... te has fijado el cambio impresionante en la voz? jajajajaa Saludos desde Uruguay!

[@FalconMasters]

Si, fue hace 10 años mi primer video, era un niño cuando inicie este canal de youtube.

[@Charly__UY]

@@FalconMasters jajajaa.. tal cual!! se notaaa!!! Felicitaciones por la continuidad de este trabajo, estan muy buenos los tutoriales!!! Muchas gracias!

[@FalconMasters]

@@Charly__UY Muchas gracias a ti por ver mi contenido. Saludos

[@lucascserrate]

Bro te quiero

[@gamas5883]

Muy bueno

[@FalconMasters]

Gracias!

[@romuloalves9349]

Ótimo vídeo eu não sabia disso uma dica de ouro.

[@erickdavidmontanogallego891]

como le puedo cambiar el idioma a la consola?

[@joseangeltamaronirodriguez9837]

Genial el video

[@FalconMasters]

Gracias!