em和rem的区别

 前言

基准不同,rem相对于html的font-size,而em相对于父元素的font-size;

相对来说rem更安全,不会混乱样式

一.rem

rem以html的font-size大小为基准,如下例子:

html{
    font-size:100px;
}

button{
    //0.12rem=12px;
   font-size:0.12rem;
}

任何时候rem都是相对于html的font-size的,ie9及以上都支持rem,如果为了兼容ie8,可以多写一个px声明,就会忽略rem了

二.em

em以父元素大小为基准,如下例子

<body>
    <div class="father">
　　　　　父亲

        <div class="son">儿子</div>
    </div>
</body>
body{
    /* 字体默认大小16px,16*62.5=10 ,设定1em=10px */
    font-size:62.5%;
}
.father{
    /* 10*1.2=12px */
    font-size:1.2em;
}
.son{
     /* 10*1.2*1.2=14.4px */
    font-size:1.2em;
}

 

posted @ 2020-04-27 14:51  知了呀  阅读(250)  评论(0)    收藏  举报