您的位置:首页 > Web前端 > css

css中rem单位

更多 2016/11/27 来源:css学习浏览量:427
学习标签: css
本文导读:rem是CSS3新增的一个相对单位(root element),即rem是相对于根元素。使用rem同em一样皆为相对字体大小单位,不同的是rem相对的是HTML根元素。那么,css中rem单位究竟该如何使用呢?

一、字体各单位之间的对应关系

 

二、css中rem单位的认识

1、rem是CSS3新增的一个相对单位

2、css中rem是个相对长度单位。rem是一个相对大小的值,它相对于根元素<html>。

3、比如,我们设置html的字体大小的值为html{font-size: 87.5%;}(也就是14px),然后其他的字体就是将你要的值除以14得到的值。

 4、上面的14是个变量,相对于你对根元素html字体大小的设定,如果你设定的是62.5%,那除数就变成10了。

 

三、rem与em区别

1、使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。

2、通过rem既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

3、对于不支持rem的浏览器,应对方法是多写一个绝对单位的声明,这些浏览器会忽略用rem设定的字体大小。

例如: p {font-size:14px; font-size:.875rem;}

 

四、css中rem实例

 

html {
    font-size: 62.5%;
    /*10 ÷ 16 × 100% = 62.5%*/
}
body {
    font-size: 1.4rem;
    /*1.4 × 10px = 14px */
}
h1 {
    font-size: 2.4rem;
    /*2.4 × 10px = 24px*/
}

 

说明:

在根元素中定义了一个基本字体大小为62.5%(也就是10px。设置这个值主要方便计算,如果没有设置,将是以“16px”为基准 )。从上面的计算结果,我们使用“rem”就像使用“px”一样的方便,而且同时解决了“px”和“em”两者不同之处。

 

收藏
109
很赞
219
  • 上一篇:移动端文字过多显示省略号
  • 下一篇:没有了
  • 您可能感兴趣