HTML & CSS width = widest edge = landscape = vw, height = narrowest edge = portrait = vh

[mdavid]

Hi, I need clarification.
I thought vw and vh units where good for responsive design, but I'm confused how they apply in landscape and portrait views.
Am I correct in assuming that VW units always apply to the widest side, and VH units always apply to the narrower side?

Thanks

 

[OldMan]

100vw = 100% of viewport width not screen. The vw changes when scrollbars are added. You can use 100% for width or, as W3C tells us, use overflow:auto;. I code with vw, but will change it to 100% if I run into problems.

 

[mdavid]

Thanks OldMan,
What I wanted to know is if the widest viewport width is always always refered to as width, landscape and measured in vw units?
The narrower viewport width always as height, portrait, and measured in vh units

Thanks

 

[Johna]

I'm not sure what you mean, but width is from left to right (or right to left), and height is from top to bottom (or bottom to top).

 

[mdavid]

So the viewport width changes depending on landscape or portrait view. How does that make vh and vw good units to use for responsive design?

 

[Johna]

So the viewport width changes depending on landscape or portrait view. How does that make vh and vw good units to use for responsive design?

That's exactly what a responsive design is supposed to do - change with the screen size.

If, let's say, you have a square, and you want it to take the full height of the screen and half the width, you would put width: 50vw; and height: 100vh; in your CSS

 

[mdavid]

Hi John, thanks for this.
Really sorry to appear dumb - but there's something I'm not getting.
Say I have a viewport 700px X 300px, then in your example:
portrait view - height: 100vh; = 700px (1vh = 7px)
landscape view - height:100vh; = 300px (1vh = 3px)

Is that correct?

 

[Johna]

Yeah that's correct.

 

[mdavid]

Thanks very much for explaining, couldn't get my head around 1vh not being constant.