em和rem 单位的使用

em和rem

px、em和rem三者的关系

1.px

概念：像素。相对长度的单位。

特点：所有浏览器均支持

2.em

概念：是长度的相对单位。

特点：em的值不是固定的、会继承父级元素的字体大小。相对父级的的字体大小。

3.rem

概念：CSS3新增的单位，长度的相对单位，以html元素的字体单位做参考。

em的用法

由于em会继承父级元素的字体，所以多级使用em会出现，情况会变得棘手，会使得像素的单位计算变得复杂。

实例Demo：

<div class="parents">
    祖先
    <div class="parent">
        爷爷
        <div class="father'>
             父亲
             <div class="son">儿子</div>
        </div>
    </div>
</div>

.parents{
    font-size: 20px;
}
.parent{
   font-size: 1.5em;/*相当于 font-size:30px*/
   width: 2em; /*相当于 width:40px;   2 * 20px*/
}
.father{
    width: 1em; /*相当于 width: 30px;  以父级字体单位做参考 1 * 30px;*/
}

rem 的用法

rem是css3新增的相对单位，但与 em 的区别在于相对的参考对象。em是相对其父级元素的字体大小，而rem是相对 html 的字体大小，因此rem相对灵活，参考对象都一致为 html元素的字体大小。

实例Demo：

<div class="parents">
    祖先
    <div class="parent">
        爷爷
        <div class="father'>
             父亲
             <div class="son">儿子</div>
        </div>
    </div>
</div>

html{
   font-size: 10px;
}
.parents{
    font-size: 20px;
}
.parent{
   font-size: 1.5rem;/*相当于 font-size:15px*/
   width: 2rem; /*相当于 width:20px;   2 * 10px*/
}
.father{
    width: 1rem; /*相当于 width: 10px;  以父级字体单位做参考 1 * 10px;*/
}

移动端的适配问题

在移动端，能使用百分比的尽可能使用百分比，也可通过设置html的字体来适配，可通过浏览器的宽度动态计算 html 的字体大小。

为了方便计算，一般采用设计稿的宽度像素w/10 px 作为html的字体大小。譬如，移动设计稿为 750 x *,可进行html的字体设置为75px。这样的话， 1rem = 75px。

也有些时候，前端开发者，会利用浏览器默认字体 16px。通过设置html元素的字体大小为 16px * 62.5% = 10px (即 font-size = 10px, 1rem = 10px);

需要注意的：

在浏览器中，html允许的最小字体大小 不同，Chrome浏览器允许 字体最小 font-size: 12px;也就是说，html的字体最小为12px,当html的font-size<12px；1rem = 12px；10rem = 120px;

为了避免这种情况，动态改变html的字体大小来实现移动端适配，我们尽可能将html的字体大小设置大一点，譬如 浏览器的可视区域宽度为 400px, 可进行设置html元素的font-size:40px (即 1rem = 40px) ;

什么情况使用em、rem、px和百分比

1. 占满全屏的元素宽度可设置 100%

2. PC和移动端字号相差很大的字体可利用rem设置字体大小