Introduction to Viewport Units
HTML-код
- Опубликовано: 26 мар 2018
- How can you use new CSS units - viewport units - to size content that changes in response to the viewport size? Jen introduces you to how vw, vh, vmin, vmax can be used in creative ways.
Demos:
• labs.jensimmons.com/2017/01-01...
• labs.jensimmons.com/2016/examp... 
Наука
I watched this video at 6am yesterday and my head exploded. I just spent the afternoon re-writing a significant amount of code for a project coming due, using Viewport Units to control various CSS Grid elements on a landing page. I got rid of all of the media queries I was using. So much cleaner and smarter. And best of all? It works WAY better across every viewport. I just broke singing "A Whole New World". I sang both parts.
You are hilarious! Keep being awesome!
I love this so much, especially the part about singing both parts. HAHA!!
I've been waiting for the other shoe to drop, in the sense that I've been waiting for Jen Simmons to put out a video where I don't learn something, even about things that I think I understand. It hasn't happened yet, and I'm beginning to think this is a one-shoe operation. (I never know...in case I'm being too obtuse, that's a compliment.)
Great video, always learn new tips from you Jen. Thank you.
The explanation is amazing. Not only on the unit, but the history and spec about the unit. I am watching every video. Subscribed!
Loved your thoughts at the end of this video on the history of the edges, esp the bottom edge. On point.
I am beginning to use CSS. This video was helpful. I will probably be watching all your other videos for a while. Thank you for sharing your knowledge so succinctly.
Loving the show, keep it up.
All the videos are always great, thank you for triggering our curiosity
I was hoping you hadn't forgot your fan club . Thank you for this video!
This woman is a CSS goddess lol! Fantastic video, so informative 😃. This wasn't a specific tutorial. It was a glimpse of THE BIG PICTURE and she nailed it!
This show is always so thoughtful and interesting. Thank you so much for it.
I would like to thank Jen for another excellent video. I am creating my first landing page and I am determined to add responsive features from day one, though I waas struggling to grasp all the concepts necessary to make this happen.
amazing. been watching this non stop.
Pls do more and more. TQ!
A very useful overview - thank you!
Thank you, Jen! Love your videos!
thank you ma'am, your message is straight and clear and it helps me a lot
You're just amazing! Great videos and great explanation. Keep up with good videos!
Hello, I'm Elias Nielsen, your tutorials are very helpful.
This is incredibly sweet tutorial, thanks indeed
Love the possibilities this opens up.
Very educative! please continue . . .
Thank you , thank you, thank you this made so much sense !
Such quality with such a nice voice...
I hope you are well ma'am ....discovered your channel just last week, watched all of them and learnt a lot...
Will wait for some new tutorials :)
Thank you for this useful video! I was also hoping that you would address the issue of using vh on mobile (navigation bars showing and hiding disrupt elements using vh). Maybe in a next video?
best channel on css
Your way of talk is so beautiful
I love to use
height: calc(100vh - whatever)
great explanation as always!
Thank you for helping us build a better web
thanks so much for this explanation !! :]
Thank u for this awesome video
Thank you, very useful.
I read your book Jen. You are such a goddess on this. ❤❤❤
Hey. What book?
Great Stuff, thanks so much!
i used JS before to find out the width and the height of a page, save them in variables, recalculate them if the browser gets resized and set the new height and width to the header... viewport units make everything so much more easier ^^
Thank you for sharing.
Thanks. Kept to minimum and no detail left behind.
Very good explanation
Thanks jen
I'm big fan for you
Can't wait to see advanced animation techniques.
You're great I miss you.
Great video. Any tips on what to do on mobile browsers where the toolbar disappears on scrolling, causing the viewport height to change? It would be nice to use CSS for this but it ends up causing the whole page to shift unpleasantly as you scroll through it
Joseph Billingsley see this. Although not a pleasant answer. stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser
I changed my whole code i had a bad thoughts about vh and vw . I was changing the font size each break with media queries. now I guess I don't need to. thanks to you
thank you a lot
Thank you :)
This is so amazing...
thank you madam, Jesus bless you real.
That was helpful
hello there, great tip i am sure as i am not a web designer but trying to use divi themes to create one now, can we use viewport values in wordpress sites, would it be possible to see some visual examples how and where to feed these values, though it maybe is too much to ask but it will definitely help a great deal as i am breaking my head as hoe to set big images for all devices :)
I have a page, the content will be scaled up or down depends on screen width, by transform:scale . Can it re-coded by vh vw?
?Great video! What's the difference between using 100vh against using percentage-based sizing - 100%
Shachar Zadik I think it's the height - if you set the height to 100% - it will fill all your page, but viewport takes up the size of the viewport. I think the width makes no difference if it's percents or these unita
ruclips.net/video/0DbKJnxxAAc/видео.html here it's also good explained
Well, first off I think, % relate to the parent container if I'm not mistaken, while v* units always relate to the viewport size, ie. browser, screen, etc.
muy buen contenido sobre todo header { display: flex; height: 100vh;}
how did you do it can you share with me , thank you
vw includes scroll bar width, shouldn't we prefer % instead?
Спасибо, практически ничего не понял, но было интересно.
What about in mobile devices, I want divs to have the size of the whole viewport, but is not working. Worst of all, the problem is different for each browser.
port mean real screen size? (physical size) ?
I dislike viewport units because they effectively turn off zooming in browser. As someone who uses page zoom a lot on desktop (I am quite myopic), it bothers me a lot when I see a page poorly designed with viewport units. I've decided not to use them, but if you do, I suggest caution.
Which one is better viewport units or fr units in grid
It depends on what kind of result you want, what kind of content you have. Did you see the video on FR units? I recommend watching that next if you haven't. There's actually a 3-part series on the different kinds of units you can use.
👍😁
I am the silent fan
Viewport units are not reliable on mobile devices, which means we can't use them in real life apps and websites.
Marcin Cichocki Interesting. I had to look it up and found this stackoverflow which has a ton of information on the subject.
stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser
You can easily change from VH or VW to px going to pads and phones. But I see your point. :)