CSS中字体响应式的设置 & rem与px的转换

吴冬雪~

已于 2023-09-17 16:21:19 修改

阅读量2.7k

点赞数 1

分类专栏： CSS 文章标签： rem与px的转换 CSS中字体响应式的设置

于 2019-05-27 16:03:55 首次发布

CSS 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

在进行页面响应式设计中，往往需要根据屏幕分辨率来显示不同大小的字体。通常的做法是通过media queries给不同的分辨率指定不同的字体样式，例如：

body {
    font-size: 22px; 
}
h1 {
    font-size:44px;
}

@media (min-width: 768) {
    body {
        font-size: 17px; 
    }
    h1 {
        font-size:24px;
    }
}

CSS中几种不同单位之间的比较

px：像素（Pixel）。相对长度单位，所占大小由屏幕分辨率决定。

em：相对长度单位。相当于当前对象内文本的字体尺寸，如果当前对行内文本的字体尺寸未被认为设置，则相对于浏览器的默认字体尺寸。em的值并不是固定的，它会继承父级元素的字体大小。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

rem：CSS3新增的一个相对单位。rem是相对于根元素<html>，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

我们知道，浏览器默认的字号16px，来看一些px单位与rem之间的转换关系：

|  px  |     rem       |
------------------------
|  12  | 12/16 = .75   |
|  14  | 14/16 = .875  |
|  16  | 16/16 = 1     |
|  18  | 18/16 = 1.125 |
|  20  | 20/16 = 1.25  |
|  24  | 24/16 = 1.5   |
|  30  | 30/16 = 1.875 |
|  36  | 36/16 = 2.25  |
|  42  | 42/16 = 2.625 |
|  48  | 48/16 = 3     |
-------------------------

为了方便计算，时常将在<html>元素中设置font-size值为62.5%:·

相当于在<html>中设置font-size为10px，此时，上面示例中所示的值将会改变：

|  px  |     rem        |
-------------------------
|  12  | 12/10 = 1.2    |
|  14  | 14/10 = 1.4    |
|  16  | 16/10 = 1.6    |
|  18  | 18/10 = 1.8    |
|  20  | 20/10 = 2.0    |
|  24  | 24/10 = 2.4    |
|  30  | 30/10 = 3.0    |
|  36  | 36/10 = 3.6    |
|  42  | 42/10 = 4.2    |
|  48  | 48/10 = 4.8    |

1rem等于html根元素设定的font-size的px值。如果css里面没有设定html的font-size，则默认浏览器以1rem=16px来换算。