Unidades de medida vh y vw en CSS
HTML-код
- Опубликовано: 10 фев 2025
- Aprende a usar las unidades de medida para calcular el viewport y crea diseños alineados a esta parte de la pantalla
✅ Suscríbete al canal bit.ly/RUclips-...
🔔 Activa la campanita de notificaciones
Descarga los archivos del tutorial:
➡️ bit.ly/MRR-Gith...
➡️ bit.ly/Github-s...
➡️ bit.ly/MRR-Gith...
❤️ Sígueme en las redes sociales:
Blog: www.vidamrr.com
Facebook: / vidamrr
Twitter: / vidamrr
Instagram: / vidamrr
----------------------------------------------------------------------------------------------------
➡️ Más videos dentro del canal:
Café con Rivas - Vlogs bit.ly/mrr-vlogs
Curso de NodeJS bit.ly/mrr-curs...
Curso de PHP + MySQL bit.ly/mrr-curs...
Basicos Dev: bit.ly/basicos-dev
Tips y trucos: bit.ly/tips-trucos
Mi primera app: bit.ly/primera-app
Tutoriales Kotlin y Android: bit.ly/tutos-an...
Problemas con código: bit.ly/problema...
Inspiración web bit.ly/mrr-insp...
Tutoriales Javascript: bit.ly/tutorial...
Reviews: bit.ly/mrr-reviews
Preguntas y respuestas: bit.ly/mrr-preg...
Curso básico de CSS: bit.ly/curso-cs...
Diseño elementos con CSS bit.ly/componen...
Mi primer sitio web con CSS: bit.ly/primer-s...
Curso avanzado de CSS3: bit.ly/curso-css3
Sitio web Completo en CSS3: bit.ly/mrr-siti...
Curso de jQuery: bit.ly/mrr-curs...
Portafolio web con jQuery: bit.ly/portafol...
Sitio web dinámico con jQuery bit.ly/sitio-di...
Tutoriales Photoshop bit.ly/mrr-tuto...
Comparto con el compa de abajo, están geniales estos temas por separados, sigue así man saludos!
Falto aclarar que width: 100% NO siempre es lo mismo a 100vw, el primero es relativo al bloque que lo contiene, el 100vw es absoluto, siempre ocupa toda la pantalla.
gracias hermano
Muy clara la explicación. Me gustan los tutoriales de este tipo, con temas puntuales. Gracias por compartir.
Y6
Ok z
Amigo excelente! era lo que necesitaba. muchs gracias
Muy muy bueno!!! Muchas gracias por la expli!!!!!!
Creo que es de las cosas mas utiles que eh visto en css
Eso es algo que no sabia, veo que también es ideal para el diseño responsive. gracias 🙂
gracias amigo, ma haz ayudado con ese problema
grandioso, lo entendi a la perfeccion
Que buen video, siempre esta bien recordar estos pequeños conceptos.
Gracias por la info. podrias decir que letra usas y el tema que tenes?
Que tal amigo... excelente video. Respecto a las tipografías web. El principio es igual? o hay una unidad de medida especial para manejar así las fuentes? o como se maneja las unidades em y rem?
Te amooo, ya no me acordaba de esto jsjsjs
gracias compa, saludos desde Ecuador.
Gracias!!! Me sirvio!!!!!
Muy buen video!!! Recién ando probando los vh y wv., son un pasada!!!
buen video, hace tiempo me quebré la cabeza intentando "calcular" una medida adecuada para rellenar el campo visible de una determinada sección.
Excelente explicación y experiencia
El mejor canal #VidaMRR
Excelente video, y muy sencillo, muchas Gracias
gracias, saludos desde Ecuador.
¿Como podrías aplicar esto para los libros ePub? En mi caso, si una imagen es muy alta en píxeles, no sale completa sino que se pasa a la siguiente página, o al menos no sale así, en dispositivos cuyas pantallas sean menores a la altura de la imagen. Para imágenes con más ancho que alto no hay problema, pero con el caso contrario es diferente.
La única solución que he encontrado es colocar cada imagen en su xhtml individual, pero me gustaría saber si hay alguna forma usando esta unidad
Muy bueno! Muchas gracias!
Buen vídeo!
Gracias por el tutorial. Muy bueno. Excelente.
graciass!! buena explicacion!
Buen video, gracias amigo
Muchas gracias
Gracias!
quisiera saber mas informacion con un video de como utilizar las medidas EM y REM por favor!
@Vida MMR la verdad estás medidas no se explican muy bien
Podrías hacer un vídeo hablando de ellas
Brother eres genial, pero te faltó explicar lo más básico, como por ejemplo ¿Por qué el número 100 (en la vh y vw) y por qué no 200? tuve que ir a otro tutorial para que me explicaran esto. No sé si soy el único imbécil que se pregunta puesto que creo que revisé todas los comentarios o es que no vi la explicación completa, pero entender que el número 100 es para cubrir el 100% no se desprende tan fácilmente de tu explicación.
gracia!!
Excelente
gracias mano.
Genial.
Que tema usas amigo?
video útil
bien, me quede con las ganas de em y rem que me lian :)
Tengo una duda, no entiendo el porque cuando le coloco al width 100 vw sobrepasa un poco la pantalla pero si le coloco el "%" no pasa.
revisa que no tengas un padding o margin o coloca box-sizing: border-box
gracias
una pregunta, tal vez de muy novato el # y . se usan para las clases en CSS?
Se usa para los id
Para safari la unidad vh no es compatible, por lo tanto para el responsive se van a repetir imágenes, si alguien sabe como solucionar ese problema deje un comentario acá.
background-repeat: no-repeat?
NAHH DISCULPA HERMANO, VINE DE UNA CLASE DE HTML Y CSS, NO LE ENTENDI EL CONCEPTO AL PROFE Y MUCHO MENOS A VOS, podrian por favor explicarmelo con ejemplos traidos a algo mas terrenal? . Mientras tanto voy a buscar alguien que me lo explique mejor.
una masa