HTML and CSS Reference
In-Depth Information
Given a monospace font, all characters are by definition
1ch
wide. In any proportional
face type, which is what the vast majority of Western typefaces are, characters may be
wider or narrower than the “0” and so cannot be assumed to be
1ch
wide.
As of mid-2012, support for
ch
was limited to Firefox.
Viewport-relative units
Another new addition in CSS3 are the three viewport-relative size units. These are
calculated with respect to the size of the viewport—browser window, printable area,
mobile device display, etc.
Viewport width unit (
vw
)
This unit is calculated with respect to the viewport's width, which is divided by
100. Therefore, if the viewport is 937 pixels wide,
1vw
is equal to
9.37px
. If the
viewport's width changes, say by dragging the browser window wider or more
narrow, the value of
vw
changes along with it.
Viewport height unit (
vh
)
This unit is calculated with respect to the viewport's height, which is divided by
100. Therefore, if the viewport is 650 pixels tall,
1vh
is equal to
6.5px
. If the view-
port's height changes, say by dragging the browser window taller or shorter, the
value of
vh
changes along with it.
Viewport minimum unit (
vmin
)
This unit is 1/100 of the viewport's width or height, whichever is
lesser
. Thus, given
a viewport that is 937 pixels wide by 650 pixels tall,
1vmin
is equal to
6.5px
.
These units are particularly handy for creating full-viewport interfaces, such as those
one would expect to find on a mobile device, because it can allow elements to be sized
compared to the viewport and not any of the elements within the document tree. It's
thus very simple to fill up the entire viewport, or at least major portions of it, and not
have to worry about the precise dimensions of the actual viewport in any particular case.
Here's a very basic example of viewport-relative sizing, which is illustrated in
Figure 7
.
div {width: 50vh; height: 33vw; background: gray;}
An interesting (though perhaps not useful) fact about these units is that they aren't
bound to their own primary axis. Thus, for example, you can declare
width: 25vh;
to
make an element as wide as one-quarter the height of the viewport.
As of mid-2012, support for these units was limited to Internet Explorer
9 and above.
