CSS Values and Units Module Level 3 | CSS: Presentation Layer
Standards Based Development
Font Size Value Units
Converting pixels and points differs between operating systems and screens. A point is approximately 1/72 of an inch, whereas a pixel is however big a pixel is on a device's screen. Pixels typically range between 1/72 of an inch to 1/144 of an inch. Differnt operating systems support different screen resolutions as "standards".
| Screen ResolutionPoint Size | 72dpiMac | 75dpiX | 96dpiWin | 100dpiX | 120dpiWin |
|---|---|---|---|---|---|
| 10pt | 10 | 10 | 13 | 14 | 17 | 12pt | 12 | 12~13 | 16 | 17 | 20 | 18pt | 18 | 19 | 24 | 25 | 30 | 24pt | 24 | 25 | 32 | 33 | 40 |
Viewport-percentage Lengths
css3 Values and Units has created new viewport units, that actually fit the mold for rwd. Viewport-percentage lengths are relative to the size of the initial containing block; if the viewport's height/width change, they scale accordingly. viewport-percentage length units are intended for sizing elements relative to their current viewport size.
One unit on any of the viewport-percentage length values is equal to 1% of the viewport axis; Viewport == browser window size == window object, thus if the viewport is 40cm wide, 1vw == 0.4cm.
vw Unit
The vw unit (viewport width) is equal to 1% of the width of the initial containing block. If the viewport is 200mm, and we declare h1{font-size:8vw}, the font-size of the h1 elements will be 16mm - (8x200mm)/100
vh Unit
The vh unit (viewport height) is equal to 1% of the height of the initial containing block.
vmin Unit
The vmin Unit (viewport minimum) is equal to the smaller of vw or vh.
vmax Unit
The vmax unit (viewport maximum) is equal to the larger of vw or vh.
Note: Paged Media defines how the initial containing block will transform across varying page widths, and also affects viewport-percentage length units.
Viewport-percentage length units shipped with Chrome 20, Motorola (what?), ie9, iOS 6, and...