Original link: http://caibaojian.com/rem-vs-em.html
When using rem units, they are converted into pixel size depends on the size of the font page of the root element, namely html element font size. The root element font size multiplied by the value you rem. ·
For example, the root element (html) font size 16px, 10rem 160px will be equivalent to, i.e. 10 x 16 = 160.
When em units, the pixel value will be multiplied by the use of elements of the value em em units of font size. ·
For example, if a font size div has 18px, 180px 10em will be equivalent to, i.e., 10 × 18 = 180.
to sum up
Let's take a quick bullet points summarize the content of our article: ·
- and rem em units by the browser font size is calculated based on the pixel value of your designs get.
- em unit based on font size of their elements.
- rem units based on the font size of the html element.
- The parent element em units may be subject to any influence inherited font size
- rem unit can inherit the font size from the browser font settings.
- Em units should be based on the font size of the font size of the component elements other than the root.
- The need to use em units, and requires the use rem the case of the browser font size scaling.
- Use rem units, unless you are sure you need em units, including font size.
- Media used in the query rem units
- Do not use em or rem in multi-column layout - instead%.
- Do not use em or rem, if the scale will inevitably lead to break the layout elements.