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是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和百分比
什么情况使用em、rem、px和百分比
1. 占满全屏的元素宽度可设置 100%
2. PC和移动端字号相差很大的字体可利用rem设置字体大小