怎样正确使用rem、em与px

写Bug
  • 5.1k

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

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

回复
阅读 5k
4 个回答
✓ 已被采纳

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

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

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

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

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

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

你知道吗?

宣传栏