Révision sur les différentes unités disponibles pour définir une longueur en CSS.
1. Absolute
Unit |
Name |
Equivalent to |
cm |
Centimeters |
1cm = 37.8px = 25.2/64in |
mm |
Millimeters |
1mm = 1/10th of 1cm |
Q |
Quarter-millimeters |
1Q = 1/40th of 1cm |
in |
Inches |
1in = 2.54cm = 96px |
pc |
Picas |
1pc = 1/6th of 1in |
pt |
Points |
1pt = 1/72nd of 1in |
px |
Pixel |
1px = 1/96th of 1in |
2. Relative
2.1. to the font size
Unit |
Relative to |
em |
Font size of the parent for |
ex |
x-height of the element’s font. |
ch |
The advance measure (width) of the glyph "0" of the element’s font. |
rem |
Font size of the root element. |
lh |
Line height of the element. |
rlh |
Line height of the root element (initial value). |
2.2. to the viewport size
vw |
1% of the viewport’s width. |
vh |
1% of the viewport’s height. |
vmin |
1% of the viewport’s smaller dimension. |
vmax |
1% of the viewport’s larger dimension. |
vb |
1% of the size of the initial containing block […] |
vi |
1% of the size of the initial containing block […] |
svw, svh |
1% of the small viewport’s width and height, respectively. |
lvw, lvh |
1% of the large viewport’s width and height, respectively. |
dvw, dvh |
1% of the dynamic viewport’s width and height, respectively. |
3. Examples
margin-left: 50vw;@media only screen and (max-width: 445px) {
#mp_query {
width: calc(100% - 60px);
}
#mp_submit {
min-width: 60px;
}
}
Meta-Press.es: search-engine