Date
Jul. 19th, 2024
 
2024年 6月 14日

Post: CSS: rem

CSS: rem

Published 12:11 Nov 01, 2015.

Created by @ezra. Categorized in #Programming, and tagged as #CSS.

Source format: Markdown

Table of Content

最近花了点时间修改博客的页面效果,第一次用 CSS 里的 rem 单位,顺便总结一下。

我们知道,在设置字体时常见的 pxem

px

px 是很常用的单位,比较稳定和精确,但也存在一些问题,例如当用户改变了浏览器字体胆小时如果使用 px 为单位,就会打乱页面布局,为了解决这样的问题,我们有了 em 单位。

em

em 值是相对于父元素的值,在使用 em 时需要知道其父元素的属性,或者设置为 1em

body {
    font-size: 50%;
    /*10 ÷ 20 × 100% = 50%*/
}
h1 {
    font-size: 2.4em;
    /*2.4em × 10 = 24px */
}
p {
    font-size: 1.0em;
    /*1.0em × 10 = 10px */
}

使用 em 的计算公式为:

1 ÷ 父元素font-size × 像素值 = em值

rem

rem 在 W3C 官网的描述是 font size of the root element,也就是说 rem 是相对于根元素的值。

px2em

顺便介绍一个相关的网站 PXtoEM.com

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*/
}
Pinned Message
HOTODOGO
I'm looking for a SOFTWARE PROJECT DIRECTOR / SOFTWARE R&D DIRECTOR position in a fresh and dynamic company. I would like to gain the right experience and extend my skills while working in great teams and big projects.
Feel free to contact me.
For more information, please view online résumé or download PDF
本人正在寻求任职 软件项目经理 / 软件技术经理 岗位的机会, 希望加⼊某个新鲜⽽充满活⼒的公司。
如有意向请随时 与我联系
更多信息请 查阅在线简历下载 PDF