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: th-cam.com/video/2kD4jQuGryY/w-d-xo.html
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.
@@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!!!
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.
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.
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
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 ! ..
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
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.
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???
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.
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!
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.
Diseñadores antes: ya cambie todo los pixeles y media queryes me encanta todo se ve muy bien!!! Disseñadores ahora: ama la unidad em no salio como yo esperaba, ay me dio amsiedad!!! (meme del cheems fuerte y debil xd)
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?
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.
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.
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 jajajaa.. tal cual!! se notaaa!!! Felicitaciones por la continuidad de este trabajo, estan muy buenos los tutoriales!!! Muchas gracias!
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.......
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.
@@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 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.
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.
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 ¿?
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...
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
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
![[TH] 2024 PMSL SEA W2D5 | Fall | พลาดวันนี้ จะต้องเสียใจ](http://i.ytimg.com/vi/A5-Cuo12p6A/mqdefault.jpg)
![[Práctica] Como Transformar un Sitio a Responsive con CSS Grid, Unidades EM y REM](/img/n.gif)
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: th-cam.com/video/2kD4jQuGryY/w-d-xo.html
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
@@johnjlac9379 Estupendo! Te aseguro de que aprenderás mucho.
Haz la práctica pliss!!! Me interesa un chingo aprender de diseños responsivos
@@manuelh.poncebarbosa1999 Subiré el video la próxima semana.
@@FalconMasters gracias te molestar si algo no entiendo jjjjjjjj sorry
Es el vídeo en español con la mejor explicación y ejemplificación que he visto en TH-cam.
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.
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
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.
@@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!!!
esq creo que el chavo no sabe que primero debe explicar el significado y despues la practica.
@@barondls8134 ste men
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.
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.
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.
Me alegra mucho que este video te haya sido de ayuda para entender mejor que son y como funcionan :D
Infinitas gracias, por fin puede comprender el concepto y lo útil que es !!!
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
Sos un genio! Me encantó no tenia ni idea que para eso servía!!!
Pude comprender mas la relación de los em y rem!!! Gracias Arturo!!
Al fin alguien que lo explica super cool
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 ! ..
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
este es el video definitivo para entender las unidades de medida rem y em.
Acabo de ver tu video... Chaval... ¡Eres una máquina! Muchas, muchas gracias por tu generosidad.
Muchas gracias a ti por ver mi video.
Despues de tantos años sigue siendo el mejor explicado en español, muchas gracias
Muchas gracias!
Gracias por la explicacion, ahora me quedo mas claro este tema :D
por cierto, estaria bueno que hicieras un video sobre BEM CSS, saludos !
Excelente video!. Gracias por compartir
Excelente Falcon, muchas gracias ya entiendo como hacer el responsive de manera simple. Espero el video de CSS grid
Carlos, mil gracias por todos tus tutoriales y cursos, son excelentes. 🇨🇴 un saludo desde Medellín, Colombia. Att: Santiago Ramirez 😉👍🏻
Utilizo mucho el rem y pongo un font-size al html de 62.5%
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
El frontend es genial, es muy divertido y creativo.
Excelente video, muchas gracias
Que maravillosa explicación, muchas gracias me quitaste todas las dudas
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.
Me alegra que te sirviera el video!
Excelente explicacion, gracias.
Gracias por esta gran solución!!!! Un gran 👍
Excelente vídeo. Muy explicativo y va directo al grano. Este vídeo lo compartiré desde mi Twitter.
Muchas gracias!
muchas gracias muy buena explicación
Muchas gracias Falcón... No me pierdo tus vídeos ... súper bien explicado ...
Saludos
Muchas gracias!
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!!!
Me alegra escuchar eso.
Saludos!
Falcon puto amo!! Eres uno de los mejores youtubers programadores que hay en TH-cam!!
Gracias :D
Excelente vídeo, gracias!
Excelente explicación
like que buena ayuda lo vere todo completo
gracias a ti mi pagina web me esta quedando increíble
Estupendo! me alegra escuchar eso.
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
Mejor explicado imposible, muchas gracias
Super amigo, siempre aportas, tu contenido es super interesante, espero que sigas así.
Gracias!
Muy buena explicación me ayudo mucho a entender los em y rem. Te felicito por tu gran trabajo. Saludos...
Gracias!
impresionante la explicacion!!!! crack
Gracias!
Uff que potente estas unidades de medida, Gracias a ti pude comprenderlo! 🙌
el mejor profe lejos
What I was looking for!
So now you can change your nick name haha xD
@@bravedeveloper jaja x"D
Muy buen video y lo explicaste muy bien.
muchas gracias! super util.
Muy buen video! Por fin ya no me confundiré con esto de los EM y los Rem 🤗
Muy bueno, ahora veo la utilidad de los preprocesadores de css para no tener que convertir las unidades a mano.
Es cierto
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???
hola que inspector usas para ver la tipografia
Excelente video de gran ayuda. Gracias Carlos Arturo.
nueva suscriptora! muchisimas gracias :D
Gracias!
Excelente explicación gracias por transmitir tu conocimiento, saludos
Excelente explicação!!
Vou recomendar para meus amigos que estão começando em CSS!
Obrigado.
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.
Me encantó el vídeo ahora sí lo entendí como tal, gracias
Me alegra escuchar eso. Gracias a ti por ver mi video.
gracias por el video
Excelente
Buen video. Muy didáctico.
saludos maestro
Por fin lo entiendo, muchas gracias
Genial
woww al fin compredi las unidades rem y em muchas gracias
Genial, me alegra mucho escuchar eso!
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!
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.
@@FalconMasters Gracias! ya he instalado el tema! está super genial!!!
@@abelpronet Lo enseño en este video si mal no recuerdo:
th-cam.com/video/y7I-lVHfPA4/w-d-xo.html
@@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
que increíble, fabuloso! gracias falcon!!
Excelente falconmasters
Gracias
Excelente, gracias amigo.
informacion de calidad. Gracias falcon masters.
bro eres un crack acabo de ver tu curso de html
Gracias! espero que hayas aprendido mucho en el curso.
Diseñadores antes: ya cambie todo los pixeles y media queryes me encanta todo se ve muy bien!!!
Disseñadores ahora: ama la unidad em no salio como yo esperaba, ay me dio amsiedad!!!
(meme del cheems fuerte y debil xd)
Bestial 😃👍🏻
Wow, gracias 👍. Grandes aportes amigo!!
Gracias
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
Excelente tu explicacion, pero aun me gusto la forma que dices "emmmme" 😅, cada vez que coloque esta unidad de medida me acordare de ti 🤭
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?
Genial.
ohh excelente video, era algo que no entendia y ahora si! :)
Estupendo!
Bro te quiero
Buen video
Esta bueno el vídeo sería de ver como lo haces en la página y usarlo
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.
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.
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!
Si, fue hace 10 años mi primer video, era un niño cuando inicie este canal de youtube.
@@FalconMasters jajajaa.. tal cual!! se notaaa!!! Felicitaciones por la continuidad de este trabajo, estan muy buenos los tutoriales!!! Muchas gracias!
@@Charly__UY Muchas gracias a ti por ver mi contenido. Saludos
Thank you
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.......
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.
@@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.
@@eliasvenegasolivares9947 Entonces es mejor usar flexbox para eso. Pone margenes a cada uno de los lados.
@@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.
Muy bueno
Gracias!
si a la etiqueta html le pongo un font-size de 10 puedo trabajar todo con rem, sería más fácil no?
entonces no es para qeu en dispositivos con alta densidad de píxeles haga que se vean bien?
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.
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 ¿?
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...
Podrias hacer un video explicativo del posicionamiento de los elementos con CSS 🙏🏾
¿Te refieres al posicionamiento absoluto y relativo?
@@FalconMasters síii
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
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
Ótimo vídeo eu não sabia disso uma dica de ouro.
hay algo que no entiendo, por qué pones el max-width si ya pusiste el width?
Que buenos videos, una duda que días subes mas videos
Subo un nuevo video cada semana.
eres dios
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
Woosh! Thank you so much!
Pregunta: que addon esta usando para ver tipografia?
quiero decir, para ver el tab de tipografía al momento de abrir el dev Tools de Chrome.
Genial el video
Gracias!
Excelente video, muchas gracias!. Y aprovechando quería preguntarte que plugin o configuración estás usando para css en vsc?
No uso ningún plugin ni configuracion para CSS salvo prettier
@@FalconMasters muchas gracias!
NOtable Falcon!!! GRACIAS.