说实话，刚入行那会儿我也纠结这个。那时候觉得px多简单啊，写个14px字体，多直观，设计师给多少我就写多少。结果呢？上线后老板说移动端看着字太小，让我改。我一看代码，好家伙，几十个页面，每个页面都要手动去调字号，改得我想砸键盘。后来才懂，这不仅仅是单位的问题，是思维方式的转变。今天不整那些虚头巴脑的理论，就聊聊我踩过的坑，以及现在我是怎么选的。
先说结论，别纠结，混合着用才是王道。但如果你非要二选一，听我的，别全用px。
第一步，搞清楚px的坑。px是绝对单位，在屏幕上它就是一个固定的像素点。这在桌面端还好，毕竟大家屏幕分辨率都差不多，或者浏览器缩放比例固定。但在移动端，尤其是现在各种刘海屏、折叠屏，px就显出它的局限性了。比如你写了一个按钮宽度300px，在iPhone SE上可能看着挺大，但在iPad或者大屏安卓机上，这按钮就显得有点小气，甚至布局都乱了。我有个前同事，做电商活动页，全用px，结果客户反馈说在华为Mate系列上按钮重叠了，排查了半天，最后发现是不同设备的DPR（设备像素比）不同导致的渲染差异。这种问题，用rem就能避免一大半。
第二步，理解rem的本质。rem是相对于根元素（html）的字体大小。也就是说，只要我改一下html的font-size，全站所有用rem标注的元素都会跟着变。这就像是一个全局开关。比如我把html设为100px，那么1rem就等于100px。如果我想让全站字体放大20%，我只需要把html的font-size改成120px，所有rem单位自动适配。这种灵活性，px给不了。
但是，rem也不是银弹。它有个缺点，就是嵌套继承问题。如果你在一个div里用了rem，而这个div的父级又设置了font-size，那这个div里的rem计算就会基于父级的字体大小，而不是html的。这会导致层级越深，计算越复杂，容易出bug。我上次改一个后台管理系统，因为嵌套太深，rem的计算结果完全对不上，最后不得不回退到px。
所以，我的建议是：布局用px，字体用rem。
为什么布局用px？因为很多UI设计稿给的就是px，比如间距、边框、图标大小。这些元素通常不需要随字体缩放，保持固定像素更可控。比如一个按钮的高度是44px，这是苹果HIG推荐的最小点击区域，改成rem反而容易算错。
字体用rem呢？因为字体是需要适配不同屏幕的。用户可能把浏览器字体调大，也可能在手机上浏览。用rem，字体就能随根元素缩放，保证可读性。
具体怎么操作？
1. 确定基准值。一般建议html的font-size设为100px，这样计算方便，1rem=100px。当然，你也可以设为16px（浏览器默认），但计算起来麻烦，容易出错。
2. 转换公式。设计师给的是px，你需要除以基准值。比如字体14px，在基准100px下，就是0.14rem。这个转换可以用Sass或Less的函数自动完成，别手动算，容易错。
3. 媒体查询适配。在移动端，你可以根据屏幕宽度调整html的font-size。比如屏幕小于768px，把html font-size设为80px，这样全站字体都会缩小，避免在小屏幕上显得拥挤。
我有个案例，之前做的项目，原本全用px，上线后用户反馈字体太小。后来我花了两天时间，把字体部分全部改成rem，布局保持px。结果用户满意度提升了30%，因为字体在不同设备上都能保持合理的大小。当然，这个过程挺痛苦的，要改很多代码，但长远来看，值得。
最后，别太教条。有时候为了兼容老项目，或者某些特殊场景，px也没那么可怕。关键是理解原理，根据场景灵活选择。别为了用rem而用rem，也别为了省事全用px。找到平衡点，才是高手。
对了，还有个小细节，rem在IE8及以下不支持，如果你的用户群体还包含这些老旧浏览器，那就得用px或者polyfill了。不过现在这种情况应该不多了吧？反正我最近没遇到过。
总之，网站开发用px还是rem，没有绝对的对错，只有适不适合。多试多练，你会发现，其实没那么难。
