rem (root em) units
rem (root em) units
Type of unit similar to em, but relative only to the root element, not any parent element. Thus compounding does not occur as it does with em units.
| Spec | http://www.w3.org/TR/css3-values/#font-relative-lengths |
|---|---|
| Status | W3C Candidate Recommendation |
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 57 | 62 | ||||
| 56 | 61 | TP | 48 | ||
| 16 | 55 | 60 | 11 | 47 | |
| 11 | 15 | 54 | 59 | 10.1 | 46 |
| 10 (1) | 14 | 53 | 58 | 10 | 45 |
| 9 (1) | 13 | 52 | 57 | 9.1 | 44 |
| 8 | 12 | 51 | 56 | 9 | 43 |
| Show all | |||||
| 7 | 50 | 55 | 8 | 42 | |
| 6 | 49 | 54 | 7.1 | 41 | |
| 5.5 | 48 | 53 | 7 | 40 | |
| 47 | 52 | 6.1 | 39 | ||
| 46 | 51 | 6 | 38 | ||
| 45 | 50 | 5.1 | 37 | ||
| 44 | 49 | 5 | 36 | ||
| 43 | 48 | 4 | 35 | ||
| 42 | 47 | 3.2 | 34 | ||
| 41 | 46 | 3.1 | 33 | ||
| 40 | 45 | 32 | |||
| 39 | 44 | 31 | |||
| 38 | 43 | 30 | |||
| 37 | 42 | 29 | |||
| 36 | 41 | 28 | |||
| 35 | 40 | 27 | |||
| 34 | 39 | 26 | |||
| 33 | 38 | 25 | |||
| 32 | 37 | 24 | |||
| 31 | 36 | 23 | |||
| 30 | 35 | 22 | |||
| 29 | 34 | 21 | |||
| 28 | 33 | 20 | |||
| 27 | 32 | 19 | |||
| 26 | 31 | 18 | |||
| 25 | 30 | 17 | |||
| 24 | 29 | 16 | |||
| 23 | 28 | 15 | |||
| 22 | 27 | 12.1 | |||
| 21 | 26 | 12 | |||
| 20 | 25 | 11.6 | |||
| 19 | 24 | 11.5 | |||
| 18 | 23 | 11.1 | |||
| 17 | 22 | 11 | |||
| 16 | 21 | 10.6 | |||
| 15 | 20 | 10.5 | |||
| 14 | 19 | 10.0-10.1 | |||
| 13 | 18 | 9.5-9.6 | |||
| 12 | 17 | 9 | |||
| 11 | 16 | ||||
| 10 | 15 | ||||
| 9 | 14 | ||||
| 8 | 13 | ||||
| 7 | 12 | ||||
| 6 | 11 | ||||
| 5 | 10 | ||||
| 4 | 9 | ||||
| 3.6 | 8 | ||||
| 3.5 | 7 | ||||
| 3 | 6 | ||||
| 2 | 5 | ||||
| 4 | |||||
| iOS Safari | Opera Mini | Android Browser | Blackberry Browser | Opera Mobile | Android Chrome | Android Firefox | IE Mobile | Android UC Browser | Samsung Internet | QQ Browser | Baidu Browser |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 11 | |||||||||||
| 10.3 | all | 56 | 10 | 37 | 59 | 54 | 11 | 11.4 | 5 | 1.2 | 7.12 |
| 10.0-10.2 | 4.4.3-4.4.4 | 7 | 12.1 | 10 | 4 | ||||||
| 9.3 | 4.4 | 12 | |||||||||
| 9.0-9.2 | 4.2-4.3 | 11.5 | |||||||||
| Show all | |||||||||||
| 8.1-8.4 | 4.1 | 11.1 | |||||||||
| 8 | 4 | 11 | |||||||||
| 7.0-7.1 | 3 | 10 | |||||||||
| 6.0-6.1 | 2.3 | ||||||||||
| 5.0-5.1 (2) | 2.2 | ||||||||||
| 4.2-4.3 | 2.1 | ||||||||||
| 4.0-4.1 | |||||||||||
| 3.2 | |||||||||||
Notes
IE 9 & IE 10 do not support
remunits when used in thefontshorthand property (the entire declaration is ignored) or when used on pseudo elements.iOS Safari 5.0-5.1 support
rembut not in combination with media queries.
Bugs
IE 9, 10 and 11 do not support rem units when used in the "line-height" property when used on :before and :after pseudo elements (https://connect.microsoft.com/IE/feedback/details/776744).
Borders sized in "rem" disappear when the page is zoomed out in Chrome.
Reportedly does not work on Android 4.3 browser for Samsung Note II or the Samsung Galaxy Tab 2 on Android 4.2.
Chrome 31-34 & Chrome-based Android versions (like 4.4) have a font size bug that occurs when the root element has a percentage-based size.
Causes content display and scrolling issues on iPhone 4 which typically has Safari 5.1.
Resources
Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
http://caniuse.com/#feat=rem
