对于前端开发岗位而言，手机端兼容是一个绕不开的问题，需要兼容的东西有很多，方法也不尽相同，比如字号：有人用px、有人用em，也有人用rem，但这3个单位有何不同？

 

px的含义

px即像素，是一个绝对单位。相对于em与rem而言，px是入门时学习的单位，最简单，但同时也最麻烦。px代表绝对单位，即定死了字号大小，pc端写了多种字号后，手机端就无法避免要进行多种修改并写出各种响应策略以确保手机端兼容。

 

em的含义

em是一个相对单位，但这个相对是相对父级元素而言，例如父级是20px，那么1em就代表继承父级的20px，1.5em则代表30px。相对于px而言，使用em在手机端的显示无疑更好修改，在解决前端工作量的同时也能够一定程度上减少bug。笔者认为，使用em比px要好很多。

 

但随着css3时代的到来，比em表现更为优秀的rem出现了。

 

rem的含义

rem和em一样，都是一种相对单位，但二者相对的对象不同：em相对的是父级元素，而rem相对的是html元素，具体用法可参考如下示范：

 

html{

    font-size:62.5% //浏览器默认文字大小为16px，16 * 62.5% = 10px，10px则为换算基准。

}

.element{

    font-size:1.2rem //此处的1.2rem即等于1.2 * (16 * 62.5%) = 1.2 * 10=12px，1.5rem则为15px。

}

 

em与rem混淆点

需要注意的是，网上有许多人将em与rem混为一谈，亦或者对于rem所相对的html样式中的font-size与body混淆。笔者经过对google、firefox、IE等主流浏览器进行测试，得出的结论是rem所相对的是html，而非body，正确写法见上文。

 

推荐使用rem

px、em与rem的异同主要如上，笔者在此推荐使用rem。与em所相对的父级元素而言，rem潜在的问题会更少，使用时直接在响应式中修改html即可，更为便捷。