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

hidey-ho youtube and welcome to my next video my name is Kevin and I'm bringing you weekly videos and tips and tricks and tutorials on web development so if you haven't already subscribed you should go ahead and subscribe right now in this week's video we are going to be looking at the VW vh as well as v min and v max CSS units we're gonna be looking at basically what they are and how they work but I'm not just going to look at them for layout purposes I'm also gonna look at how a few of these can really be used to make some interesting typography decisions as well and make some nice responsive typography so on the screen now you can see what I'm gonna be playing around with it's a simple simple layout that I've done in code pen I'm going to put the link down below so you can play around with this basically I've just set up a two column system here it's sort of like a basic landing screen type of thing and I put a big image down here just so we can scroll and scroll down a little bit if we come down I've put everything starting around here all the other stuff is just the basics to set everything up starting here is where I want to look at so the first thing that I've done is I have selected just everything the universal selector and change the box siding over to border box just because that makes our lives much easier that's not really a v8 VW thing it just makes our lives a lot easier for layout stuff so if you don't already do that I encourage you do that on all your sites so the very very first thing that I want to look at is the V H and V W units and we're gonna look at them with this hero that I've set up right here so the hero is this area here that has the gradient on it with the background with all of this stuff inside if i come here and i give this a let's start with a height so a height of 100 VH which will give us an idea of what's actually going on and you can see the height of it has just increased so V H and V W stand for viewport height and viewport width and they're super useful you've probably seen a lot of websites that have a full-screen section for when you get there so you get on the home page on the desktop it takes up the whole space and you scroll down but even if you resize the window it's always the same this is how we're doing it it's 100% of the viewport height is how we look at that so you can see now that second I scroll down that's where it's ending and if I change the size of my viewport it's still the same so that's really cool it's always matching the size of my viewport height one thing to be really careful with this is when you start getting into mobile views so when you're starting it in the small screen sizes this can cause issues and just to show you the type of issue that this can run into would be well let's just shrink this down and now when I scroll over everything is spilling outside and this happens on cell phones sometimes because we're using the viewport height it's a smaller viewport height the content is longer and it causes some issues so if you are using this I strongly encourage that you go ahead and use some media queries to go ahead and fix that now of course you don't have to have a ton hundred I could do whoops not eight hundred I could do eighty and then it's gonna be 80% of the height and of course you can use this for widths as well so I'm not necessarily wanting to do this but let's say I do width of eighty viewport width and now no matter what my viewport is it's going to be 80% of that size and it's going to adjust automatically you can see the white on the side there is 20% and the rest is my 80% so you could use that as something for a container or something instead of using percentage and where viewport width is different from percentage as percentage is always based on the parent element so maybe the parent is already smaller let's just get rid of that because it's weird so actually we could do this on our button just for fun with 100 viewport width so even though it's inside of something there I start with a hundred percent actually so a hundred percent it's going to stretch to be a hundred percent of its parent and one hundred percent viewport width means it's going to be the same width as my viewport so just a quick difference on what those two are and why the viewport width can be useful because sometimes you do want to something outside of the full width of a container okay so then where do V Max and V min come in well I can do AV max here so let's do V Max and what V Max is is it's looking at a viewport maximum which one is bigger it's gonna take 80% of whichever viewport unit is bigger so right now my width is bigger that's 2 smaller than this actually that's set this up at like 20 so we're gonna see right now it stops getting smaller because right now it's based on the height my viewport is taller than it is wide so it's looking at this and it's setting it to 20% of the viewport height as soon as my viewport is wider than it is tall which is right there you can see that it starts getting taller and taller and taller so it's taking the taller of the two units and if I do have V min it's the other way around it's gonna take the smaller of the two units so right now my width it should be 10 of this cuz that's the smaller one oh I was getting down to zero and it's because I have padding on there right right right I have my padding that's on there so that's the Pat let's just put this to zero my padding is gonna keep a height on there no matter what I do so let's just take the padding off having zero height 50 the min and it should keep getting small there we go there we go okay so that's why so it's stopping there so it's looking at the smaller of the two units so V min looks at the smaller of the two units and the max looks at the bigger of the units and those are a bit weird and you might be wondering when should I use one of those or the other but before I get to there one other useful place that you can use it is actually in your padding here so in if I have my height set it is 100 viewport height so it's always going to be full screen I might want to also set my padding in viewport height so if I do this as a 10 viewport height so I have a padding of 10 on the top and 10 on the bottom that means my padding will automatically adjust based on the size the height of my screen which is kind of nice so you know I'm adjusting the height already so I might as well also adjust you can see it's slowly getting smaller on the top it's not gonna make a huge adjustment but it should be enough to make a little bit of a difference so that could be something you could play around with now I mentioned we're gonna get into type and the whole V main V Max thing might start making a bit more sense once we get into type so here in my type I have my title and my paragraph so I've called that hero title and hero text and instead of doing the font size in M s we can switch these out and setting a font size for a title in viewport width can be super useful so I think you put with let's try 10 maybe a bit big let's try 8 okay so I sort of like that size and I think it looks nice at this layout but now when I'm gonna increase or decrease the size of my screen that font size will increase or decrease with it and it's gonna keep things more or less in proportion as I go around so it makes for a very very responsive type which can be super good for titles and super super handy for titles because it's a nice big font but when you're getting onto a smaller screen size you sort of want that to get smaller or else it's too big and you're used to probably making media queries that are going to affect this at different screen sizes and now I don't have to worry about the media query as much but I probably still would want to build in media queries because at one point it might get too small and at one point it might get too big this at really big screen sizes can get things really really big so you might build in a set size for very small screens and a set size for very big screens but everything in between having something as a viewport width can make for very nice responsive titles but you notice I'm saying titles and not responsive text it doesn't work so good for paragraph text because paragraph text is generally smaller to begin with it's not bold and if it gets really small it can be hard to read so let's set this to four viewport width that's probably too big let's try three then let's go down to two maybe two and a half will be perfect so looking at it there right now this looks pretty good but now my paragraph text is getting really really big it's sort of screwing up my whole layout and when I'm going smaller and smaller and smaller it's getting harder and harder to read my title is still super easy to read but this has gotten super super small so I don't really suggest using this for type it just gets a little bit funky now if I change this over to viewport height I'm not saying that it's the best thing but you can see here it's not going to change based on this so it's you know my width is not going to affect it it's only the height that will actually affect it which can be useful but it's still a little bit extreme you'd probably want to build a minimum size in there using your query i'm just because right now it's getting really really tiny but it could be useful that at smaller screen sizes it is shrinking a little bit you know if you're going onto a cell phone it's a smaller viewport height and width but it might work okay not sure if I'd really do it from a paragraph text but I'm just saying that it's a possibility and it will probably work better than the viewport width which has more extreme changes most of the time but in general I would be sizing this in my AMS I think I had that at like 1.5 or so 1.2 now where the viewport max the V Max and the V min can be really useful if I put this as my V min where this gets really useful is it's looking at the smaller of the two sizes so right now the smaller of the two sizes is the viewport width so it's going to keep shrinking and shrinking and shrinking just like I wanted it to and as I make it bigger it's going to keep getting bigger and bigger and bigger and bigger and oh it stopped because now my viewport height is the smaller unit so as soon as my viewport height became the smaller unit this isn't being affected anymore so that's really really neat and a fun way that you can play around with the size of font where it's not going to blow things out on the large sense now that does mean when this starts shrinking down it will affect the font size but that might not necessarily be a bad thing either and in general not many people are running around with screens that are this shape though obviously if someone's on a mobile device that's turned in landscape mode then you know this could happen if you are going to use any of these at any time one thing I strongly suggest is you do lots and lots of extensive testing you should already be taking into account lots of different screen sizes different screen orientations but if you're using these units for anything especially for type make sure you check every possible situation because you might run into one where all of a sudden something really weird happens so just as a little bit of a word word of warning um but I do think they're very useful units I don't use them for type a lot I do use the vh a lot for setting heights of things or occasionally when I need to set a height a lot of the time it will be with VH that I'm actually setting it and for font sizes I don't use it too much but I'm starting to try and use it more for my big big big titles because I really do like when my title is responsive like this and I don't even have to worry about it so in all I do think that the V H and V W are super useful and a little bit easier to understand what's going on the V min and V Max are a little bit harder to use and a little bit harder to wrap your mind around but they definitely have certain things that they can work for you will notice I didn't set my font size with V Max that's going to lead to some Gigantor sizes it just gets way out of hand and it never really gets small enough because it's always looking at the bigger size and it works better if this is always looking at the smaller of the two sizes and again you can just put a V W in there if it's easier to grasp just know that you'll definitely need media queries for potentially the smallest size and definitely for the larger sizes where things can start getting really big so I think that's it for this video I really hope you've liked it it's a nice short one this week if you did like the video please hit the like button to let me know that you liked it also if you haven't already subscribed and you enjoyed this video this is what I do on this channel there's a new video every single week usually on Wednesdays even though sometimes it will be a potentially later hopefully not too often and yeah so hit the subscribe button if you want more coding goodness like this and last thing there's a lot more people watching these videos these days than there used to be but there's not a lot more people commenting so please don't be shy leave a comment down below let me know what you thought let me know if you think you could use this in any situation if there's any questions any comments just want to say hi whatever it is don't be shy leave a comment below and until next week guys have a fantastic week and you know take it easy

Channel: Kevin Powell

Views: 109,872

Keywords: HTML, CSS, How to, Web development, tutorial, web tut, web tutorial, html5, css3, Kevin Powell, front end, front-end, front end coding, web coding, programming, front end programming, vmin, vmax, vw, vh, css units, responsive, responsive design, responsive web, responsive website, responsive type, responsive typography, css type, css typography

Id: IWFqGsXxJ1E

Length: 14min 27sec (867 seconds)

Published: Fri Feb 17 2017