Deja de usar píxeles y usa REM y EM | Ejemplos prácticos
ฝัง
- เผยแพร่เมื่อ 12 ก.ย. 2024
- ✔ Diferencias entre px vs rem vs em y cuándo usarlos.
✔ Cómo puedes sacarle provecho en la práctica a rem y em para hacer diseños escalables y adapativos.
✔ Análisis de págians web como TH-cam y LinkedIn para ver cómo utilizan los rem.
📺 Videos relacionados:
Galería de imágenes responsive usando CSS GRID: • Galería de imágenes re...
Maquetado responsive con CSS Grid: • Maquetado responsive c...
👀 Les sugiero pongan el video en 1080p para que puedan ver el código con nitidez.
👍 Suscríbete al canal y activa la campanita para que no te pierdas ningún video:
www.youtube.co...
🐤Sígueme en twitter:
/ ymulenll
📌Enlaces:
Código del ejemplo: github.com/ymu...
Muchas gracias por ver este video, espero le haya sido útil.
#css
Ojalá todos los videos fuesen como el tuyo, ameno, útil, sin contenido superfluo. ¡Genial el truco de los 62.5%! no lo conocía.
Comenten, compartan, suscríbanse y denle mg. Se merece todo
Muy buén contenido, felicidades y gracias!
Excelente... Lo que quería saber, sin vueltas ni complicaciones... Me has resuelto un dolor de cabeza.
Estaría muy bueno un video explicando cómo hacer emails de newsletter con CSS y HTML ya que no encuentro mucho sobre el tema, y realmente es algo que ayudarìa muchisimo. Me encantó como explicas. Saludos!
Excelente, para las fuentes en un principio usaba solo px para todo, luego vi un vídeo como este y empecé a solo usar rem y %, pero hoy entendí que a veces me convendría incluir em :3 y buena explicación lo de los % en los mediaqueris
Recién acabo de descubrir tu canal. Primer cubano que veo haciendo este tipo de videos y la verdad que están geniales. Un suscriptor más! Es la mejor explicación de rem y em que he visto.
Hola Jaime, muchas gracias!
Muy buen video amigo, diste varios consejos muy útiles. Te animo a que sigas con tu canal y que subas más contenido acerca de los standars y mejores prácticas en diseño web, que es de lo que mas cuesta aprender a los que vamos aprendiendo. Gracias!
Hola. Genial. Muchas gracias!!! Estoy aprendiendo un montón con tus videos. Saludos desde Uruguay
Gracias por compartir todo tu conocimiento genio, nunca se va a encontrar algo mas claro y bien explicado que esto! De aca me voy para la guia completa de CSS grid!
Te agradezco muchísimo por todos tus videos, me han servido muchísimo, explicas demasiado bien, 1000 gracias por compartir tu conocimiento con nosotros, saludos desde México!
Una explicación muy concreta, Gracias!
Que crack con la exolicación
Una explicación clarísima, muchas gracias.
wow lo explicaste de maravilla
Excelente vídeo gracias 👍👍👍👍 no se si ya tendrás algún vídeo sobre menú de hamburguesa flotante fijo en la parte de abajo derecha, ahora se utiliza mucho ese tipo de menú y en muy practico en los celulares.... Saludos y gracias
Hola Manuel, gracias por la sugerencia, saludos
No me enteré mucho porque soy bastante novato en esto, pero ya solo con la pasion que le pones y por como te brillan los ojos al explicar (señal que te gusta y le pones pasión al asunto) te voy a dar un like muy buen trabajo la verdad, ¿pero de donde sale que 62.5% sean 10px si el tamaño es del padre es 16? eso no lo entienedo bien ¿me lo puedes explicar porfa?
De 5 videos la explicación más clara, nuevo sub
Me habre visto mas de 5 videos para tratar de entender esto, lograste que lo pueda entender!
Muchas gracias
Me alegro que te haya servido, puedes suscribirte para que no te pierdas los otros videos que estoy preparando. Saludos
Muchas gracias y muy buen contenido explicando en tan poco tiempo muchas cosas y muy importantes. Un saludo
excelente como explicas,gracias
Muy buen video,excelente explicacion me sirvio de mucha ayuda . Gracias.
El vídeo está 10/10, la explicación está genial!!!!
¡Genial explicación! No tenía del todo claro los conceptos. Me has ayudado un montón con este video. Muchas gracias. Suscrito.
Me alegro mucho, intenté hacerlo práctico para que le podamos sacar utilidad, gracias por suscribirte.
Muy bueno!!!!
Muy bien explicado. Gracias x tu apoyo.
Muy buen video, bien explicado. Gracias!
buenisimo
Muchas gracias! Me quedo super claro todo!
Muy buen video!! creo que empezaré a utilizar esto en mis sitios web... una idea de video q podrias hacer es uno de buenas practicas en css
¡Excelente explicación, muy claro!
Muchas Gracias!!!
Clarísimo, gracias!!!
gracias Silvio por el comentario, Saludos!
eres mejor
Excelente!
Muy buen video. ¿Recomiendas los rem al vw como unidad de medida para el font-size en responsive?
Gracias, excelente explicación
exelente video, conceptos muy utiles, go ahead.
Excelente explicacion!. muchas gracias!
Muy buen vídeo! ¿Que tipo de tamaño recomiendas finalmente para una app híbrida hecha con cordova html,css,js Saludos!
Muy buen video
Sos un genio. Excelente videooo!
Una maravilla
Qué bien explicas, mil gracias! Suscrita 💕
Muchas gracias por tu comentario, saludos
Buen video, muchas gracias :3
Estuvo muy genial el video
muy útil ¡
gracias!
puedes enseñar flexbox eres buenisimo explicando gracias por tus videos
gracias, si voy a hacerlo
chidoo
Mas videos!!! Proyectos :D
Gracias. una pregunta... el em toma de medida el rem pero dentro de la ese estilo de css cierto?
Genial bro.. Excelente...
Muy bueno el video! :) de casualidad tienes algún video de como convertir los pixeles automáticamente a rem usando sass?
Gracias, no eso no lo tengo, se que se puede hacer con postcss, pero no se cómo se haría con Sass, habría que googlearlo
Muy bueno! Aunque tengo una duda, ¿seria mala practica trabajar con todo REM y luego en las medias queries, modificar el html{ font-size } para que todo aumente o disminuya proporcionalmente al cambio que le hiciste?
Un ejemplo: Tenes toda la pagina hecha con font-size: 16 px (especificado en el html) y trabajas absolutamente todo en REM pero luego a la hora de hacerlo responsive, solo modificas en la media querie, el html{ font-size: 14px }...
En teoria, ahi TOODO, te deberia disminuir proporcionalmente ¿no? Pense en eso y me hizo dudar de si utilizo EM o no...
Me gustaria saber tu opinión al respecto @Yoelvis
Creo que es una excelente idea, lo que haría sería poner todas las fuentes en rem, y los margenes y padding si están asignados a un elemento que tenga definido su fuente, pues usaría em como muestro en el video
great man!
Muchas gracias por tu explicación, ya me estaba rayando con esto de las medidas para hacer mi página responsive. Una pregunta y que hay con respecto a las medidas vw o vh que aparecen con css3? para que puedo usarlas?
Hola Roxana, muy buena pregunta, yo realmente no los usoucho, el vh a veces se usa para colocar algún estilo que ocupe todo el alto de la página (pero tiene algunos problemas en celulares). También se usan para calcular el tamaño de la fuente basado en el ancho o alto del viewport.
Por ejemplo para usar la función clamp que está muy buena para colocar fuentes responsive, en ese caso uso el vw
Yo vi en otro vídeo que decía usar en para fuentes y para todo lo demás rem mmm ahora ando confundido 🤨🤔
*_Siempre se me hizo muy complicado css_*
yo no entendi el em :(
El em es relativo al tamaño de fuente del elemento donde se encuentra, ejemplo: si el font-size es del elemento es de 4px, 2em = 8px, 1em = 4px, 0.5em = 2px. Sin embargo el rem no depende del elemento donde se encuentra sino del tamaño de fuente del html (la raíz)
Puedes experimentar para que pruebes el concepto, espero haber aclarado la duda. Saludos
Ojo, el 62.5% al html es un antipatrón!
Todo tiene sus casos de uso, el problema es que los diseñadores te dan todo en px y hay que transformarlo a rem/em, fíjate TH-cam que usa 10px de fuente en el html que es básicamente la misma idea y al parecer les facilita el desarrollo. Pero si entiendo que cambiar la base puede afectar a aplicaciones que dependan de librerías externas que use rem o que te hace que debas agrandar las fuentes de casi todos los elementos ya que la fuente por defecto quedaría muy chica (cosa que casi siempre hago de todas formas). Yo creo que lo ideal es es usar variables CSS para tener tamaños estándar en toda la aplicación (estilo tailwindcss). Saludos
@@YoelvisM yo en mi caso utilizo funciones con el preprocesador sass para convertir de px a rem y em, así trabajar comodamente en pixeles y traspilar en rem y em!