jamie dimon
CSS中字体响应式的设置rem与px的转换
房子的英文在进⾏页⾯响应式设计中，往往需要根据屏幕分辨率来显⽰不同⼤⼩的字体。通常的做法是通过给不同的分辨率指定不同的字体样式，例如：
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新增的⼀个相对单位。是相对于根元素<html>，通过它既可以做到只修改根元素就成⽐例地调整所有字体⼤⼩，⼜可以避免字体⼤⼩逐层复合的连锁反应。
我们知道，浏览器默认的字号16px，来看⼀些px单位与之间的转换关系：
| px | rem |husbandry
------------------------
| 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 |初中数学几何公式
recently是什么意思| 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 |head怎么读
| 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 |
osd
1rem等于html根元素设定的font-size的px值。如果css⾥⾯没有设定html的font-size，则默认浏览器以1rem=16px来换算。
html{font-size:14px}
pt：印刷业上常使⽤的单位，⼀般⽤于页⾯打印排版，即磅的意思。
%：另外我们还可以使⽤百分⽐来指定⼤⼩，它表⽰当前字体相对于浏览器默认字体⼤⼩的倍数。该单位在页⾯响应式设计中也被经常⽤到。
vw/vh/vmin/vmax：表⽰字体相对于viewport⾼或宽的⼤⼩。
来源：
