Viewport Units Tutorial: The Magical CSS Unit of Measurement

We know about pixels and percentages, but what about viewport units? Link to my new video course:

Add me on Twitter for webDev updates and cat pics:






24 responses to “Viewport Units Tutorial: The Magical CSS Unit of Measurement”

  1. richardsan gohil Avatar

    Really awesome one, This will polish my css knowledge really well. Thank you for sharing knowledge.

  2. Tijmen J. Avatar

    what if you wanted to scale the text size relative to the parent element instead of the viewport? would percentages work? honestly I've never used dynamic font sizes before.
    also, implementing a legacy fallback is not that easy as you imply, you still have to implement the extra steps to get the full height of the viewport when scaling 100% height for a div. I honestly find that the worst part of past HTML and CSS. first using tables.. then shitty css with tens of different ways to have things aligned the way you want it. and now a mix of that with more intuitive CSS styling but still having to think about people stuck in time. haha.

  3. Umesh Gupta Avatar

    hello Brad vh and vw property is not working safari browsers so please explain how to work this browser and thank you

  4. Pandapferd Avatar

    love the video
    and the cat

  5. Bernhard Hofmann Avatar

    Can you use it?

    In the company I work for, no. But one day…. one day.

  6. Three One Avatar

    Another great video! I checked Can I Use and VH and VW are supported all the way back to IE 9. Unfortunately Vmax and Vmin still have spotty support.

  7. premier69 Avatar

    ok so supporting legacy browsers, going out of my way to to do. it feels like keeping a typewriter and a Fax around just to support, whoever doesn't want to get with the times I guess.

  8. Jamhur / Davronov Avatar

    love and respect
    one of the best teacher in youtube

  9. Alex Shaikevich Avatar

    I can't get over how incredibly useful these videos are given my current skill level. I know just enough to realize what I'm doing wrong, to get really excited about these css tricks. Thanks for taking the time!

  10. kevin zhang Avatar

    Very nice tip and information. Thank you!

  11. Daveyo89 Avatar

    In an ocean of generic html/css tutorials, this is really refreshing. Thank you!

  12. ProfessionalMe Avatar

    What program do you use to record / edit your videos?

  13. Alessandro Scaltritti Avatar

    In the first example, if I set .box { margin: 0 auto } the .inner div don't take the full page width but it uses the left-margin: auto; declared for the .box div.
    How can I take the full width of the browser page with the .inner div?

  14. smithen85 Avatar

    Fucking love your videos

  15. Puci Agario Avatar

    Can you please just show us how to make a onepaged portfolio website i am stuck i can't build one .
    p.s I have completed you wordpress series awesome work thank you

  16. Dave Jackson Avatar

    Is this tutorial in the git- course??

  17. RmonikMusic Avatar

    Quick question, you use transform without any vendor prefixes, is this safe to do at this point or should you still include the webkits, mozes, o's etc for fallback?

  18. salima k Avatar

    Thank you Brad. I am following the udemy course religiously 🙂

  19. Ben Jackson Avatar

    Any plans for Ruby or Liquid tutorials? 🙂

  20. Alessandro Scaltritti Avatar

    great video (as always), simple and clear. thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *