怎样正确使用rem、em与px

Question

第一次使用rem来重构移动端项目的样式，除了一些组件，全都换成了rem代替以前的px。现在发现一个问题，就是之前封装了一些vue组件，样式是px写的，有些需要根据字体缩放的地方就用了em，其实就是看着差不多就可以了这样……然而整体现在换了rem，组件还是px、em，那不就做不到整体统一？而且也引用了一些第三方组件，发现它们也是差不多这样。

我去观摩了一下一些第三方组件，比如基于微信ui的vux，比如饿了么的Mint UI，他们写样式的时候，一些地方用px，一些地方用em，那他们写组件的样式的时候是根据什么原则，什么时候用px，什么时候用em？

Answer 1

rem 是相对于根元素的字体大小，em 是相对于父级元素的字体大小，px 是直接设置像素大小

一般来说，如果需要统一字体大小，建议用 rem，但有些局部，相对动态需要根据父元素字体来设置大小的，会选用 em。另外还有一些比较特殊的情况，比如需要与固定像素的图片配合布局等，那就要用到 px 了。

具体用哪个需要根据实际情况而定，完全没必要统一。必要的情况下甚至需要按响应式设计。

Answer 2

我觉得不能一概而论，如果你需要在PC上显示大字，而手机上显示小字的时候，你就用rem，但如果你需要在PC上也显示小字，手机上也显示小字的时候，就直接用px就好了，比如通常正文的字体大小不论在手机上还是PC上都是14px，如果PC上显示14px，而手机上等比例缩放成7px的话，那字就小的没法看了，所以像这种情况就不要用rem，而统一用14px就好了。

Answer 3

如果是用rem的话，可以看下手淘的方案

Answer 4

首先要明确知道其意义用法，rem是相对于根元素的变化，em是相对父级元素变化，px是物理像素是死的。具体你要怎么用的话，肯定就跟你的需求有关了。除了上面那些其实也可以有viewport里的设置缩放值在控制整体的自适应，而且这个你就可以完全对着设计稿的尺寸像素来码，可以不考虑其他的上面因素，比如你的设计稿是640的，你就完全照着640的尺寸来，然后js来控制在当前设备的缩放大小，比如你在5s，320的设备上看，就把缩放值设为0.5,说白了就是通过js获取当前设备的浏览器设备宽度比上你设计稿的尺寸大小。