rem是相对于根元素 < html > 的,我们只需要在根元素上设置一个参考的值,这个参考值根据自己的需求来定。
如:浏览器的默认的font-size=“16px”,它的px和rem之间的转换如下表所示:
px | rem |
---|---|
12px | 12/16=0.75 rem |
14px | 14/16=0.875 rem |
16px | 16/16=1 rem |
18px | 18/16 = 1.125 rem |
20px | 20/16 = 1.25 rem |
24px | 24/16 = 1.5 rem |
30px | 30/16 = 1.875 rem |
36px | 36/16 = 2.25 rem |
42px | 42/16 = 2.625 rem |
48px | 48/16 = 3 rem |
1rem等于html根元素设定的font-size的值
假设我们在css中设定的css为:
html{
font-size:14px
}
我们设定一个div的宽度为5rem,高度为2rem,换算成px结果为:宽度为70px,高度为28px;
同理,如果设计稿上的宽度为70px,高度为28px,换成rem,结果为:宽度为5rem,高度为2rem
注意:如果css里面没有设定html的font-size,则默认的浏览器以1rem=16px来换算