markdown em vs rem

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了markdown em vs rem相关的知识,希望对你有一定的参考价值。


<font size=4>`em`</font> &emsp; <font color=silver>(which is relative to parents' font size)</font>: &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;   
scaling elements which `font-size` is different from `<html>`'s    
<br>
Commonly used on `margin`, `padding`, `width`, `height`, `line-height`   
on <font color=lightblue>headings</font>, <font color=lightblue>menu</font> items, <font color=lightblue>buttons</font> 
&emsp;(because if element's font changes, it might become too small/big to look good)  
<br>


<font size=4>`rem`</font> &emsp; <font color=silver>(which is relative to root `<html>` element font size)</font>: &emsp;&emsp;&emsp;  
for everything else 

Use on ALL `font-size`s (preserve scalability but avoid `em`s inheritance confusion) with a few __exceptions__:  
* Second level <font color=lightblue>menu item</font> in a dropdown menu where its `font-size` is different from parent's).   
* Font icon used inside a button, where the icon’s size should relate to the button’s text size.  
<br>
Conversion from `rem` to `em` based on `font-size` of parent element (rem): &emsp;
`converted-unit` <font size=1>em</font> = `unit-to-convert` <font size=1>rem</font> &divide;  `parent-font` <font size=1>rem</font> &emsp;&emsp;&emsp;eg 
`Xem` = `19rem` &divide; `1.6rem`

以上是关于markdown em vs rem的主要内容,如果未能解决你的问题,请参考以下文章

markdown EM与REM

从前慢-移动WEB开发之rem适配布局

如何在vscode里将px转rem,而且还得爽

响应式字体设置rem,em,px

em,rem

css中em和rem的区别