HTML and CSS Reference
In-Depth Information
width: 50vw; /* 50% of viewport width */
height: 25vh; /* 25% of viewport height */
Two additional viewport units are
vmin
and
vmax
, which give the minimum or
maximum value of the viewport's dimension.
width: 1vmin; /* 1vh or 1vw, whichever is smallest */
height: 1vmax; /* 1vh or 1vw, whichever is largest */
Chrome 26+, Firefox 19+, IE11+, Safari 6.1+, and Opera 15+ all support the viewport
units. The
vh
,
vw
, and
vmin
units have greater support than
vmax
, going back to Chrome
20+, IE9+, and Safari 6.0. In IE9 and IE10,
vmin
is instead called
vm
.
Unit values
It is possible to set length using decimals. Some properties also allow negative values for
length.
p { font-size: 0.394in; } /* decimal value */
p { margin: -1px; } /* negative value */
Note that a rule does not work if there is a space before the unit or if no unit is
specified—except for the value zero. Including a unit after zero is optional, but it is good
practice to omit it.
p { font-size: 1ex; } /* correct */
p { font-size: 0; } /* correct */
p { font-size: 0ex; } /* correct */
p { font-size: 1 ex; } /* invalid */
p { font-size: 1; } /* invalid */
Whenever a CSS declaration contains an error, it is ignored by the browser. Any other
valid declarations in the rule still apply.
