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

最新推荐文章于 2022-08-05 11:42:10 发布

aobishan2879

最新推荐文章于 2022-08-05 11:42:10 发布

阅读量128

点赞数

原文链接：http://www.cnblogs.com/gangya0327/p/7364748.html

版权

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

转载于:https://www.cnblogs.com/gangya0327/p/7364748.html

aobishan2879

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3的REM设置字体大小——笔记

px单位　　比较稳定精确，但在浏览器中放大缩小页面时会出现问题：用户改变浏览器字体，会使页面布局被打破，因此提出使用“em”em单位　　它需要一个参考点，一般以<body>的“font-size”为基准。比如使用“1em”来改变默认值“1em=16px”,这样一来，设置字体“14px”时，只需要将其设置为“1.4em”body { font...
复制链接

扫一扫