Deja de usar píxeles y usa REM y EM | Ejemplos prácticos

Подписаться 38 тыс.

Просмотров 17 тыс.

50% 1

✔ 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 RU-vid 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:
ru-vid.com?sub_...
🐤Sígueme en twitter:
/ ymulenll
📌Enlaces:
Código del ejemplo: github.com/ymulenll/px-vs-rem...
Muchas gracias por ver este video, espero le haya sido útil.
#css

Опубликовано:

6 июн 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 75

@alvaroprietovideos 3 года назад

Ojalá todos los videos fuesen como el tuyo, ameno, útil, sin contenido superfluo. ¡Genial el truco de los 62.5%! no lo conocía.

@mauriciosalinas716 Год назад

Comenten, compartan, suscríbanse y denle mg. Se merece todo

@AbrahamPeraltaLLicahua 2 года назад

Que crack con la exolicación

@walterdanielhuaynapataagui8716 Год назад

wow lo explicaste de maravilla

@miguelolvera3546 2 года назад

buenisimo

@analiabazzana1445 2 года назад

excelente como explicas,gracias

@luisjhonayquerzapatayamo8767 3 года назад

Estuvo muy genial el video

@helenasaenz3912 3 года назад

Excelente... Lo que quería saber, sin vueltas ni complicaciones... Me has resuelto un dolor de cabeza.

@JorgeSanchez-yu9qs 3 года назад

Muy bueno!!!!

@christianpaullozano7524 3 года назад

eres mejor

@ernepazzo1212 2 года назад

Muchas Gracias!!!

@alejandrodinardo4804 3 года назад

Una explicación clarísima, muchas gracias.

@ayrtonlavayen 3 года назад

Una explicación muy concreta, Gracias!

@Damtrax666 3 года назад

Excelente!

@carlosvazquez3678 Год назад

Una maravilla

@cdicho Год назад

De 5 videos la explicación más clara, nuevo sub

@tomascoscarelli8707 3 года назад

Sos un genio. Excelente videooo!

@madelsonacosta7962 3 года назад

Buen video, muchas gracias :3

@soldadopreciso 3 года назад

exelente video, conceptos muy utiles, go ahead.

@suchox 3 года назад

¡Excelente explicación, muy claro!

@encode2390 2 года назад

Muy buen video

@nahuelherrera7301 3 года назад

Excelente explicacion!. muchas gracias!

@infofacil97 3 года назад

Muy bien explicado. Gracias x tu apoyo.

@guillermofrasquetcasas2694 2 года назад

Muy buen video, bien explicado. Gracias!

@dan_seb 2 года назад

Muchas gracias! Me quedo super claro todo!

@Erick-hg5xp 2 года назад

Muchas gracias y muy buen contenido explicando en tan poco tiempo muchas cosas y muy importantes. Un saludo

@cuntancuntan1253 3 года назад

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!

@dahiana166 Год назад

Hola. Genial. Muchas gracias!!! Estoy aprendiendo un montón con tus videos. Saludos desde Uruguay

@kingofdrum 4 месяца назад

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?

@sebastianrodelo7965 2 года назад

Gracias, excelente explicación

@micanal3569 2 года назад

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!

@TuPapaHL10 2 года назад

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

@dylandsteven6201 2 года назад

Muy buen video,excelente explicacion me sirvio de mucha ayuda . Gracias.

@enrique2652 2 года назад

El vídeo está 10/10, la explicación está genial!!!!

@julianflores6364 Год назад

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!

@CAFernandezB 3 года назад

Genial bro.. Excelente...

@javicrowley 2 года назад

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

@silviozabala2814 4 года назад

Clarísimo, gracias!!!

@YoelvisM 4 года назад

gracias Silvio por el comentario, Saludos!

@jaimemenendezalvarez5796 2 года назад

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.

@YoelvisM 2 года назад

Hola Jaime, muchas gracias!

@tomascoscarelli8707 3 года назад

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!

@herxsie 3 года назад

Qué bien explicas, mil gracias! Suscrita 💕

@YoelvisM 3 года назад

Muchas gracias por tu comentario, saludos

@NahuelMina 2 года назад

Muy buen video. ¿Recomiendas los rem al vw como unidad de medida para el font-size en responsive?

@sdfsfsfd437 4 года назад

¡Genial explicación! No tenía del todo claro los conceptos. Me has ayudado un montón con este video. Muchas gracias. Suscrito.

@YoelvisM 4 года назад

Me alegro mucho, intenté hacerlo práctico para que le podamos sacar utilidad, gracias por suscribirte.

@thetrooper6 4 года назад

great man!

@lalocanario243 3 года назад

muy útil ¡

@YoelvisM 3 года назад

gracias!

@FernandoGoni-vl2wd 3 года назад

Me habre visto mas de 5 videos para tratar de entender esto, lograste que lo pueda entender! Muchas gracias

@YoelvisM 3 года назад

Me alegro que te haya servido, puedes suscribirte para que no te pierdas los otros videos que estoy preparando. Saludos

@evertsystem9043 3 года назад

Muy buen vídeo! ¿Que tipo de tamaño recomiendas finalmente para una app híbrida hecha con cordova html,css,js Saludos!

@efrainimanol Год назад

chidoo

@fernandoortiz4775 3 года назад

Mas videos!!! Proyectos :D

@manuelalejandrorodriguezhe5784 3 года назад

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

@YoelvisM 3 года назад

Hola Manuel, gracias por la sugerencia, saludos

@sweetdreams1292 3 года назад

puedes enseñar flexbox eres buenisimo explicando gracias por tus videos

@YoelvisM 3 года назад

gracias, si voy a hacerlo

@casajose9051 2 года назад

Gracias. una pregunta... el em toma de medida el rem pero dentro de la ese estilo de css cierto?

@cristianandres2165 3 года назад

Muy bueno el video! :) de casualidad tienes algún video de como convertir los pixeles automáticamente a rem usando sass?

@YoelvisM 3 года назад

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

@roxanachavez9813 3 года назад

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?

@YoelvisM 3 года назад

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.

@YoelvisM 3 года назад

Por ejemplo para usar la función clamp que está muy buena para colocar fuentes responsive, en ese caso uso el vw

@juancruzledesma5693 2 года назад

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

@YoelvisM 2 года назад

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

@pepito7773 10 месяцев назад

Yo vi en otro vídeo que decía usar en para fuentes y para todo lo demás rem mmm ahora ando confundido 🤨🤔

@SnS-SpartaN Год назад

*_Siempre se me hizo muy complicado css_*

@cristianorcasur6755 3 года назад

yo no entendi el em :(

@YoelvisM 3 года назад

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)

@YoelvisM 3 года назад

Puedes experimentar para que pruebes el concepto, espero haber aclarado la duda. Saludos

@cerm88 Год назад

Ojo, el 62.5% al html es un antipatrón!

@YoelvisM Год назад

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 RU-vid 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

@cerm88 Год назад

@@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!