px,em,rem 都是用来描述字体大小的单位
px
px 像素(Pixel).相对长度单位.像素 px 是相对于显示器屏幕分辨率而言的.
任意 浏览器 的默认字体大小都是 16px.
给 html 标签设置 font-size 属性并赋值,将根据设置的值显示字体, 其子标签若没有单独设置 font-size,子标签的字体大小和父标签一致.否则,按设置的值显示.
支持度:目前所有浏览器.
em
em 是相对长度单位.em 的值并不是固定的,em 会继承父级元素的大小. 1em=16px;
p p p p p papapapapapapa
ppppppppppppppppppppp papapapapap
#demo{
font-size:1em;
}
#demo a{
font-size:0.75em;
}
.demo2{
font-size:1em;
}
.demo2 i{
font-size:2em;
}
运行结果:
支持度:IE8 及以上支持,其它浏览器.
但是可以看到 em 是相对父级元素的,但 HTML 标签的嵌套太过复杂时使用 em 就不是太好的选择了.
rem
rem 是 CSS 3 中新增的一个相对单位.root em(相对于根元素的 em).
使用 rem 设定字体大小时,仍然是相对的,但是相对的只是 html 根元素.
只需要修改根元素,就可以成比例的调整所有的字体大小,还能避免因为层级嵌套太多造成的连锁反应.
对于不支持 rem 的浏览器,多写一个 px 就好.不支持的浏览器会自行忽略 rem.
rem 与 px 的换算
1rem 等于多少 px 呢?1rem 等于 html 根元素设定的 font-size 的 px 值.
假设我们设定如下
html {
font - size: 14px;
}
此时 1rem=14px.
px 与 rem 的选择?
对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用 px 即可 .
对于需要适配各种移动设备,使用 rem,例如只需要适配 iPhone 和 iPad 等分辨率差别比较挺大的设备.
来源: https://www.2cto.com/kf/201801/713587.html