浅谈css中三种常用元素单位

实例

<div class="px"> px </div>
<div class="em"> em </div>
<div class="rem"> rem </div>

<style type="text/css">
.px {
    font-size: 20px;
    width: 100px;
    background: green;
    text-align: center;
    line-height: 100px;
}
.em {
    font-size: 20px;
    width: 5em;
    background: blue;
    text-align: center;
    line-height: 5em;
    
}

.rem {
    font-size: 1.25rem;
    width: 6.25rem;
    background: pink;
    text-align: center;
    line-height: 6.25rem;
    
    
}

</style>

下面为手写代码：

感悟：px是相对于屏幕显示器显示的css元素单位，em是相对于当前字体的大小显示的css元素单位，rem根元素单位，相对于根元素显示的css元素单位（想必H5与c3的自适应精髓在rem元素单位的引入，个人见解，欢迎吐槽）！