W3C home > Mailing lists > Public > www-style@w3.org > May 2013

Re: vh and vw as units for dimensions.

From: ACJ <ego@acjs.net>
Date: Tue, 28 May 2013 20:43:00 +0200
Message-ID: <51A4FAB4.5070501@acjs.net>
To: www-style@w3.org
Op 28-5-2013 20:22, irfan mir schreef:
>
> How is it not necessarily the same as 1% of the computed height and 
> width of the html, body?
>
> Is it because and when the html, body is given a fixed dimension like 
> width:1024px; and not it is not a percent of the viewport?
>
> Because I believe I am right when the html, body is a 100% percent of 
> the viewport then 1vh is equal to 1% of the html, body's height and 
> 1vw is equal to the html, body's width.
>

If the width of the body/html is 100% of the viewport, then 1% of the 
body/html will obviously be the same as 1% of the viewport. In all other 
cases, it is not. vh and vw refer to the dimensions of the viewport 
rather than the dimensions of the body/html (though, yes, they could 
have the same value).

Sincerely,

ACJ


> On May 28, 2013 1:04 PM, "ACJ" <ego@acjs.net <mailto:ego@acjs.net>> wrote:
>
>     Op 28-5-2013 19:48, irfan mir schreef:
>>     Okay, I understand now. Thank you for the explanation. This
>>     really cleared things up.
>>
>>     1vh = 1% of html, body's height and 1vw = 1% of html, body's width.
>>
>>     And they let one use the units as relative the percentage of the
>>     html, body height and width instead of relative to the parent
>>     height and width.
>
>     Well, technically, 1% of the the viewport's height and width,
>     respectively. This is not necessarily the same as the computed
>     dimensions of the body and/or html elements.
>
>     Sincerely,
>
>     ACJ
>
>>
>>
>>     On 28 May 2013 08:59, Tab Atkins Jr. <jackalmage@gmail.com
>>     <mailto:jackalmage@gmail.com>> wrote:
>>
>>         On Tue, May 28, 2013 at 6:28 AM, irfan mir <theirf@gmail.com
>>         <mailto:theirf@gmail.com>> wrote:
>>         > I just learned about the vh and vw units and see how it
>>         would be very
>>         > helpful in terms of typography.
>>         >
>>         > But in terms of using it as a unit for dimensions, what
>>         differentiates vh
>>         > for height and vw for width from percent?
>>         > Don't a 100 of all 3 take up the entire viewport?
>>
>>         As Henrik said, percentages are only equal to vw/vh on the
>>         html/body
>>         elements, and on other elements if *every ancestor was 100%
>>         width/height as well*.
>>
>>         That's obviously rarely true, so vw/vh let you use the
>>         viewport size
>>         deeper into your page structure.
>>
>>         It also works for things where percentages are interpreted
>>         differently, like font-size (where they're relative to the
>>         parent's
>>         font-size).
>>
>>         ~TJ
>>
>>
>>
>>
>>     -- 
>>     Regards,
>>                   Irfan Mir.
>
Received on Tuesday, 28 May 2013 18:43:29 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 28 May 2013 18:43:29 UTC