px和em,rem的区别

 任意浏览器的默认字体高都是16px。

px: 像素(Pixel) , 计算机屏幕上的一个点。固定大小；不方便维护；

em：相对于当前对象内 (父元素) 文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(16px)。相对大小；

rem:相对于HTML根元素。相对大小；

(所有未经调整的浏览器都符合:1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html{
            font-size:12px;
        }
        #father{
            font-size: 22px;
        }
        #em{
            font-size: 1em;
        }
        #rem{
            font-size: 1rem;
        }
        #px{
            font-size: 32px;
        }
    </style>
</head>
<body>
 <div id="father">
     <div id="em">我是1em</div>
     <div id="rem">我是1rem</div>
     <div id="px">我是32px</div>
 </div>
</body>
</html>

浏览器的兼容性: 除了IE6-IE8r，其它的浏览器都支持em和rem属性，px是所有浏览器都支持。

posted @ 2016-12-06 10:51  米娜-火箭  阅读(146)  评论(0)  编辑  收藏  举报