px rem,em的使用

px：绝对单位，页面按精确像素展示
em 单位转为像素值，取决于他们使用的字体大小。此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
em单位会被显式重写大小决定，父元素字体大小，浏览器的默认字体大小。

<div style="font-size:20px;">
    <p style="font-size:1em;">这里1em=20px</p>
    <p style="font-size:2em;">这里2em=40px</p>
</div>

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。rem 单位翻译为像素值是由 html 元素的字体大小决定的。此字体大小会被浏览器中字体大小的设置影响，除非显式重写一个具体单位。

<html style="font-size:100px;">
<head>
    <title></title>
</head>
<body>
     <p style="font-size:1rem;">这里1rem=100px</p>
     <div style="font-size:50px;">
          <p style="font-size:2rem;">这里2rem=200px</p>
     </div>
</body>
</html>

rem 单位翻译为像素值是由 html 元素的字体大小决定的。此字体大小会被浏览器中字体大小的设置影响，除非显式重写一个具体单位。

em单位转为像素值，取决于他们使用的字体大小。此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位。