弹性布局建设网站时使用rem,em的好处
发布时间:2021-03-30来源:admin
<p>
1.rem,em区别:rem,em都是顺应不同网页字体大小展现而产生的。其中,em是相对其父元素,在实际应用中相对而言会带来很多不便;而rem是始终相对于html大小,即页面根元素。
</p>
<p>
2.使用 em 或 rem 单位进行相对布局,相对%百分比更加灵活,同时可以支持浏览器的字体大小调整和缩放等的正常显示。
</p>
<p>
3.这类布局方式的特点是,包裹文字的元素使用rem,em 作为单位,而页面的主要划分区域则使用,%,px作为单位,这样可以让包裹文字的元素随着文字的缩放而缩放。
</p>
<p>
4.用em/rem定义尺寸的另一个好处是更能适应缩进/以字体单位外边距或内边距/浏览器设置字体尺寸等情况(因为em/rem相对于字体大小,会同步改变)。
</p>
<p>
5.浏览器的默认字体高度一般为16px,即1em:16px,但是 1:16 的比例不方便计算,为了使单位em/rem更直观,CSS编写者常常将页面跟节点字体设为62.5%,比如选择用rem控制字体时,先需要设置根节点html的字体大小,因为浏览器默认字体大小16px*62.5%=10px。这样1rem便是10px,方便了计算。<br />
<div>
<br />
</div>
</p>
<p>
<br />
</p>
<p>
<br />
</p>
<p>
<br />
</p>