码迷,mamicode.com
首页 > Web开发 > 详细

CSS3的REM设置字体大小——笔记

时间:2017-08-15 15:13:01      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:浏览器   www.   问号   需要   ie6   with   公式   strong   改变   

 

px单位

  比较稳定精确,但在浏览器中放大缩小页面时会出现问题:用户改变浏览器字体,会使页面布局被打破,因此提出使用“em”

em单位

  它需要一个参考点,一般以<body>的“font-size”为基准。比如使用“1em”来改变默认值“1em=16px”,这样一来,设置字体“14px”时,只需要将其设置为“1.4em”

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

   为什么“li”的“1.4em”是不是“14px”是一个问号呢,因为“em”是一个相对值,相对于父元素,其真正计算公式是:

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

rem单位

  CSS3的出现,引进了新的单位rem——font size of the root element。rem是相对于根元素<html>,意味着我们只需要确定一个参考值。

 

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*/
}

 rem在浏览器中的兼容性

   IE6-8无法支持,其他主流均可

 

原文链接:http://www.w3cplus.com/css3/define-font-size-with-css3-rem

CSS3的REM设置字体大小——笔记

标签:浏览器   www.   问号   需要   ie6   with   公式   strong   改变   

原文地址:http://www.cnblogs.com/gangya0327/p/7364748.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!