Shopware主题开发：.unitize混合器为何同时生成px与rem代码？

这其实是Shopware特意设计的行为，核心目的是做浏览器兼容的优雅降级！

你想啊，虽然现在绝大多数现代浏览器都支持rem单位，但还是有一些非常老旧的浏览器（比如IE8及更早版本）完全不认识rem。这个混合器同时输出px和rem的逻辑，就是为了让你的布局在新旧浏览器里都能正常工作：

• 支持rem的现代浏览器会遵循CSS的层叠规则，用后面的rem值覆盖前面的px值；
• 不支持rem的旧浏览器会直接忽略rem样式，乖乖使用前面的px值，避免布局崩掉。

具体来说，Shopware的.unitize混合器内部会先根据你传入的px值，结合主题里预设的根字体大小（默认一般是16px）计算出对应的rem值，然后同时输出两个声明——先px后rem，刚好利用CSS的优先级（同权重下后声明的生效）来实现兼容。

如果你确实不需要兼容旧浏览器，想只生成rem样式，其实可以自己写一个简化的混合器，或者看看主题配置里有没有关闭双单位的开关（不过默认是开启的，毕竟兼容是常规需求）。但除非你明确知道你的用户群体完全不用旧浏览器，不然不建议去掉px的 fallback 哦。

内容的提问来源于stack exchange，提问作者Shashank Bhatt