PX特点
IE无法调整那些使用px作为单位的字体大小;
EM特点
em的值并不是固定的;
em会继承父级元素的字体大小。
比如父元素设置了1.2em,子元素也设置了1.2em 那么事实上子元素设置的是1.2*1.2 em
rem特点
rem是CSS3新增的一个相对单位(root em,根em)。
- 这个单位与em有什么区别呢?
使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素,比em容易计算。
- 使用rem的问题
IE8及更早版本不支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
个人建议
同时使用rem和px,使用px只是为了兼容ie6-ie8这些不支持rem的浏览器
具体实现
根元素设置62.5%
比如
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;
}