CSS Units: vh, vw, vmin, vmax #css #responsive #design

A look at the viewport CSS units vw, vh, vmin and vmax. Not only do I look at how they work for layout purposes, but how they can be really useful for setting type as well!

---

If you have your own channel, check out Chillhop for some awesome music.

[rawnoob]

Note to self: the difference between vw (or vh) and percentages is that vw and vh are relative to the viewport whereas percentages are relative to the parent element.

[nuttaphonr.]

Thanks for great explaing :3
6:14 vmin
6:58 auto adjust padding based on vh
7:37 setting font size with vw
9:40 problem with setting font with vw and vh
10:54 using vmin to set fontsize (very useful)

[truefisherking]

I use:


font-size: calc(Xvw + Yem);

X and Y = two numbers.
Example: calc(0.5vw + 1em);
The cool thing is, you can easily control 'how responsive' the text will be.
Sorry if you already have a video with this method. I haven't watched all your videos (you rock BTW), and I haven't seen this technique anywhere else.
Thanks for the excellent content. I've learned so much.

[The-Heart-Of-It]

A neat trick is to set the font size on the parent element to 1vw and then use em on the child elements to get everything responsive at different widths.

[TheJacklwilliams]

Kevin, as I work through CSS and apply these things to a site I'm building (my portfolio site, etc...) I've found very quickly mastering what units to use for what elements is well, damn important. Thank you for the lesson(s).

[mohamedelidrissi]

I heard you read all comments, even those in videos that are 2 years old, so I just wanna say hi and thanks for the well explained videos!

[ayo.eleven]

I just wanted to comment something as it helps grow the channel.
Your tutorials are so awesome that there is hardly anything I can write here that doesn't make me feel silly :) Wish you lots of luck!

[cgungm]

Thank you, Kevin. You have a rare talent for explaining what could be very complicated into something more easily digestible.

[antives]

These videos are really changing the way I handle CSS design. My techniques was always based off from elementary courses all explaining the basics, however these are real world experience coupled with a great way of teaching! Thanks, Kevin, these videos are really helping me (and many, I'm sure) to become better developers :D

[sueholder]

I have started using vw for my body font-size because I use rem and em's and I use vw vh for divs but this is a whole new level and so exciting. Thanks for bringing these tips that make everything make that much more sense. You definitely help make the corners of the web that much better. ;) See you in the next one!

[markcook]

This is a video to remember, having seen, when I might someday come across this concern. I am so new to CSS and realizing how powerful it is.

Organizing all my notes, so that I can quickly find previous points of interest is my most pressing issue. Robert Pirsig's book: comes to mind and all the notes that the narrator kept.

[yasirtahirkheli]

easy, simple and elegant explanations....you are probably the best instructor for css i have ever come across...Kevin...stay blessed

[bollvigblack]

this is brilliant. you not only show us what code does but tell us how can we use simple code like this in a a different situations which is super useful !

[VideoMo]

Great video! I was using vh for my header most of the times but never tought about using vw for responsive Titles. You are the reason I dont hate CSS as much as I used to.

[adolfojbarreto]

I can't believe I missed this video when you published it! The aggravation this would have saved me, Kevin. I have a patch of grey hair due to this issue. Thanks again!

[saguoran]

I was looking for the video "vh vs em css", YouTube gave me this one. Thanks Kevin, I have better understanding of them.

[devincox]

Hey Kevin. Just wanted to say thanks for giving me a half a dozen "monkey-touch-rock" realization moments in the last few days with regards to responsive design. It's helped immensely.

[elninoxz]

This tutorial made it crystal clear what these responsive units do, thanks man!

[milleniummoses]

I've a good portion of today and yesterdya watching yoru videos. I've learned so much. It's like my skillset adn efficiency exponentially improved overnight. THANKS!

[pottingshedgene]

Yet another super clear explanation Kevin. Superb.. Thank you again. STILL enjoying your 21 day course. Try it folks it's ace.