px 像素(pixel)
相对长度单位,相对于显示器屏幕分辨率而言。
特点:
- IE无法调整以px为单位的字体大小
- 一部分用户仍在使用IE浏览器或者内核
一般使用px来设置文本 ,因为比较精确和稳定, 但如果用户修改浏览器文本尺寸, 会打破整个页面布局。这时候em出现了
em
相对长度单位,相对于当前对象内文本的字体尺寸。 若没有设置对象文本的字体尺寸,则默认为浏览器字体尺寸。
特点:
- em的大小并不是固定
- em会继承父元素的字体大小
任意浏览器的默认字体尺寸为16px,没有经过调整的都符合:1em=16px。所以得出这样的计算公式:
- 1 ÷ 父元素的font-size × 需要转换的像素值 = em值
注意:避免重复声明字体大小,因为em会继承父元素,使用时多注意些。
实在懒的换算啥的,也可查表对应查找:
rem(root em 根em)
相对长度,使用rem为元素设定字体大小时,仍然是相对大小,但相对的始终是HTML根元素。
特点:
- 响应式字体尺寸,用户改变浏览器字体尺寸,也不会影响页面布局。
例如:默认的html font-size=16px, 我想设置为12px,只需:12/16=0.75rem
但总不见得每次要换算都拿个计算器啪啪啪的敲吧,对于我们懒癌患者来说当然是越简单越好啦。若你硬要口算,我也不拦着你,你开心就好,跳过以下。
只需要把font-size=10px,不就简单又快捷了嘛。
html{
font-size:62.5%; /* 10÷16=62.5% */
}
body{
font-size:12px;
font-size:1.2rem ; /* 12÷10=1.2 */
}
p{
font-size:14px;
font-size:1.4rem;
}
- IE9/IE10在用于伪元素时或者使用字体简写声明时不支持rem
IOS Safari5.0-5.1虽然支持rem,但是在使用媒体查询时不支持rem。
注意:
具体选择什么字体单位主要由你的项目来决定,若用户群大多是最新版本的浏览器,那么推荐使用rem。若要考虑兼容性的话, IE9以上等浏览器是支持CSS3的,想要兼容IE低版本,那可以考虑针对IE9以下低版本浏览器,用px来实现。
最后提供一个换算工具:
px,em,rem转换地址
若有不足,欢迎指正。