DEV Community

CSS *vh (dvh, lvh, svh) and *vw units

Anthony Frehner on November 01, 2021

Background This background section is large; here's a handy link to the new unit section if you would like to skip ahead. However, I th...
Collapse
 
marsidev profile image
Luis Marsiglia

Underrated article. Thank you!

Collapse
 
ankitbtanna profile image
Ankit Tanna

amazing article...

Collapse
 
claranceliberi profile image
Clarance Liberi 💯

the history makes difference, it makes it easy to understand those l,s, and d prefixes

Collapse
 
misterdigital_ profile image
Javier Trujillo (Misterdigital)

This article is a fantastic deep dive into the various viewport units available in CSS! The detailed explanations of vh, dvh, lvh, svh, and vw are incredibly helpful, especially for developers who are looking to create responsive designs that adapt seamlessly across different devices and screen sizes. The visual examples and comparisons make it easy to understand the nuances between these units. It's great to see how dvh and svh can help address some of the limitations of vh in modern web design. Thanks for sharing this comprehensive guide!

Collapse
 
martin-luo profile image
Martin Luo

Awesome articles with the detailed history, thank you!

Collapse
 
bhelabhav profile image
Bhav Bhela

Nice article - really appreciate the history, helps it stick in my mind more :)

Collapse
 
wencyen profile image
Wen

Thanks for this really helpful article. Learning the history of how decisions are made is so insightful. Do you have any tips for how someone could go about researching the decisions made about v* since this article was published in 2021?

Collapse
 
carliecrosby profile image
Carlie Crosby

Great article! The addition of dvh, lvh, and svh units is a game-changer for modern CSS, especially for handling dynamic viewport heights on mobile devices. These units address common issues with browser UI adjustments that vh struggled with, offering much more reliable layouts across different scenarios. For anyone building responsive web apps, adopting these new units can significantly improve user experience. Thanks for the clear breakdown!

Collapse
 
dadachi profile image
Daisuke Adachi

Now, min-h-[75dvh] is best.
tailwindcss.com/blog/tailwindcss-v...

Collapse
 
rolandixor profile image
Roland Taylor

Quite handy as reference! Thanks!

Collapse
 
phyllis_mapes_dd87d390246 profile image
Phyllis Mapes

After read this post, I solved my problem @blockblast

Collapse
 
nasirwordpressdev profile image
Nasir Uddin

Thanks