创新路
我们一直在努力

CSS3新特性之:rem相对单位详解

rem是(font size of the root element),官方解释:意思就是根据网页的根元素来设置字体大小,和em(font size of the element)的区别是,em是根据其父元素的字体大小来设置,而rem是根据网页的跟元素(html)来设置字体大小的。

PS:rem不仅可以适用于字体,同样可以用于width height margin这些样式的单位。

使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。

现在大部分浏览器IE9+,Firefox、Chrome、Safari、Opera ,如果我们不修改相关的字体配置,都是默认显示font-size是16px即

html {
    font-size:16px;
}

那么如果我们想给一个P标签设置12px的字体大小那么用rem来写就是

p {
    font-size: 0.75rem; /*12÷16=0.75(rem)*/
}

由于存在一个转换单位的问题,每次使用rem单位都需要重新去计算一次,确实有些繁琐,根据美工效果出图的前端估计要疯掉,所以我们提供了这样一个方案,重新定义html

html{
     font-size:62.5%;/*设置这个是为了rem单位方便计算,实际字体大小为10px*/
}

那么我们再次给P标签设置12px的字体大小

p {
    font-size: 1.2rem; /*现在是否就直观很多了呢*/
}

看到现在,也许你还完全没有体验到rem单位的好处,折腾了半天,还不是同px的效果一模一样,那干嘛不接着用px呢?

我们知道移动端屏幕适配的问题,是一个很麻烦的事情,如果为了适配屏幕,每次都去繁琐的修改字体大小,那个工程量是非常巨大的。

我们来重温一下rem的特性:使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。

看懂了吧,下次你做媒体查询的时候,只需要将html的字体大小改了,那么所有页面中调用了rem单位的字体或者宽度那些都会跟着变,这让HTML的字体大小值就相当于一个变量了

总结,划重点:

rem最大的价值,就是能等比例适配所有屏幕

未经允许不得转载:天府数据港官方信息博客 » CSS3新特性之:rem相对单位详解

客官点个赞呗! (0)
分享到:

评论 抢沙发

评论前必须登录!

天府云博 - 做有态度的开发&运维&设计学习分享平台!

联系我们百度云主机