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

 

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

posted @ 2017-08-15 14:38  苏凛凛  阅读(340)  评论(0)    收藏  举报