-
Notifications
You must be signed in to change notification settings - Fork 0
/
css-units.html
137 lines (137 loc) · 3.43 KB
/
css-units.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html>
<head>
<style>
p{
background-color: black;
border: 1px solid black;
margin: 0;
}
div {
display: table;
}
h2 {
text-align: center;
}
h3 {
text-align: left;
}
table, th, td {
border: 1px solid black;
}
th {
padding: 1em;
text-align: center;
}
td {
padding: 1rem;
text-align: justify;
}
</style>
</head>
<body>
<div>
<table>
<caption><h2>Table of CSS size units</h2></caption>
<tbody>
<tr>
<td colspan="3"><h3>Relative size units</h3></td>
</tr>
<tr>
<th>Unit</th>
<th>Actual look</th>
<th>Description</th>
</tr>
<tr>
<td>em</td>
<td><p style="width: 1em; height: 1em"></p></td>
<td>Relative to the font-size of the element (2em means 2 times the size of the current font)</td>
</tr>
<tr>
<td>ex</td>
<td><p style="width: 1ex; height: 1ex"></p></td>
<td>Relative to the x-height of the current font (rarely used)</td>
</tr>
<tr>
<td>ch</td>
<td><p style="width: 1ch; height: 1ch"></p></td>
<td>Relative to width of the "0" (zero)</td>
</tr>
<tr>
<td>rem</td>
<td><p style="width: 1rem; height: 1rem"></p></td>
<td>Relative to font-size of the root element</td>
</tr>
<tr>
<td>vw</td>
<td><p style="width: 1vw; height: 1vw"></p></td>
<td>Relative to 1% of the width of the viewport*</td>
</tr>
<tr>
<td>vh</td>
<td><p style="width: 1vh; height: 1vh"></p></td>
<td>Relative to 1% of the height of the viewport*</td>
</tr>
<tr>
<td>vmin</td>
<td><p style="width: 1vmin; height: 1vmin"></p></td>
<td>Relative to 1% of viewport's* smaller dimension</td>
</tr>
<tr>
<td>vmax</td>
<td><p style="width: 1vmax; height: 1vmax"></p></td>
<td>Relative to 1% of viewport's* larger dimension</td>
</tr>
<tr>
<td>% </td>
<td><p style="width: 1%; height: 1%"></p></td>
<td></td>
</tr>
<tr>
<td colspan="3">
Tip: The em and rem units are practical in creating perfectly scalable layout!
* Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm.
</td>
</tr>
<tr>
<td colspan="3"><h3>Absolute size units</h3></td>
<tr>
<th>Unit</th>
<th>Actual look</th>
<th>Description</th>
</tr>
<tr>
<td>cm</td>
<td><p style="width: 1cm; height: 1cm"></p></td>
<td>centimeters</td>
</tr>
<tr>
<td>mm</td>
<td><p style="width: 1mm; height: 1mm"></p></td>
<td>millimeters</td>
</tr>
<tr>
<td>in</td>
<td><p style="width: 1in; height: 1in"></p></td>
<td>inches (1in = 96px = 2.54cm)</td>
</tr>
<tr>
<td>px</td>
<td><p style="width: 1px; height: 1px"></p></td>
<td>pixels (1px = 1/96th of 1in). Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution screens 1px implies multiple device pixels.</td>
</tr>
<tr>
<td>pt</td>
<td><p style="width: 1pt; height: 1pt"></p></td>
<td>points (1pt = 1/72 of 1in)</td>
</tr>
<tr>
<td>pc</td>
<td><p style="width: 1pc; height: 1pc"></p></td>
<td>picas (1pc = 12 pt) </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>