首页 微言心语 rem与px的转换

rem与px的转换

GavinWu 2020年12月05日 20:12 微言心语 515 Views

rem是相对于根元素,这样就意味着,我们只需要在根元素确定一个参考值,这个参考值设置为多少,完全可以根据您自己的需求来定。 我们知道,浏览器默认的字号16px,来看一些px单位与rem之间的转换关系:

1
2
3
4
5
6
7
8
9
10
11
12
13
|  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     |
-------------------------

为了方便计算,时常将在元素中设置font-size值为62.5%: 相当于在中设置font-size为10px,此时,上面示例中所示的值将会改变:

1
2
3
4
5
6
7
8
9
10
11
12
13
|  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    |
-------------------------

相关文章

  • Wordpres 给page页面地址添加html后缀

    Wordpres 给page页面地址添加html后缀

    Wordpres page页面默认是没有后缀的,通常是以http://xx.com/page/的形式,从SEO的角度出发…

  • HTML/CSS——renderer

    HTML/CSS——renderer

    如果一个网站大量采用了html5和css3,希望用户都以支持H5和css3的webkit内核打开页面,则需要设置cont…

  • HTML/CSS——viewport

    HTML/CSS——viewport

    什么是viewport viewport是针对移动设备的响应式设计。viewport 直接翻译就是用户网页的可视区域。通…

七牛

发表评论

QR Code

本页二维码