什么情况下用rem，什么情况下用px

Question

假设有个新mobile web工程，在纠结是用rem，还是px，理由是？

更多背景信息，望各位留言我补充上来。

找了一些案例，淘宝系大都rem，jd是px，qzone是px，vip是rem。

找了一些库，amazeui touch是rem, weui是px。

------分割线------

我自己的理解是 设计驱动 的公司偏向于rem，因为要还原设计稿，要求高。

开发驱动的UI，简单来，px搞定即可。

Answer 1

新的手机网页推荐用vw vh这个单位，不推荐rem

Answer 2

看效果 , 我一般还是px,移动端大部分还是flex布局,字体没必要rem

Answer 3

各有各的优点，缺点根据项目的情况而定。
px比较精确，但是缩放后就优点乱了。
rem是根据父元素进行设置的。

Answer 4

感觉哪个顺手就用哪个咯,我习惯用rem,配合上@function toRem($px) { @return ($px / 100) * 1rem; }美滋滋呀

Answer 5

认同 @radius 看法，vw vh 更好

Answer 6

再聊移动端页面的适配

Answer 7

vw vh虽然很好，不过兼容性还是很怕。。
rem电脑也支持。。。兼容性算是很不错了

个人经验来说
希望它能改变的用rem，
希望它不变的用px。。

举例子：

border-bottom：1px solid #ddd；
下划线我一般只用1px大小。。不想变大的时候线条变粗。。

最大或者最小尺寸的时候超过1000px不能再变大。。

手机导航固定44px高度之类的

Answer 8

还是看项目需求来定，最理想肯定是vw vh，
但是你得看兼容性，我之前有新项目有想用vw vh，测试过的很多安卓的原生浏览器不支持。

现在基本是rem做大布局，字体用px或rem，另外不用js缩放，而是参考之前的一个ui库写的：
当然有sass的话写表达式生成亦可。
html {
font-size: 20px;
}
@media only screen and (min-width: 400px) {
html {

font-size: 21.33333333px !important;

}
}
@media only screen and (min-width: 414px) {
html {

font-size: 22.08px !important;

}
}
@media only screen and (min-width: 480px) {
html {

font-size: 25.6px !important;

}
}

Answer 9

唯品会移动端和京东移动端一个用的是rem一个是px。
rem与px都可以做自适应。后者代码量比前者多很多，但是也可能他们自己有工具，提供一套样式然后直接生成几套就可以了。
自适应需要用到media属性
唯品会使用js来计算

京东直接是在样式中写

这个是scss写法

自适应现在有很多方式可以选择就看自己怎么选择

Answer 10

rem 主要用来解决 边距/填充 问题，字体还是要用 em 会更好。
并不是所有的东西都适合用 rem 。

盲目跟风比较严重。

Answer 11

这个貌似不是规定死吧，rem是相对根元素变化的，可以做不同屏幕适配。但是有时这个过程中也会使用到px，可以好好看看淘宝的做法。em是相对父元素，所以做字体缩进的话，用这个就比较准确啦。这个主要还是看开发的过程中使用哪种方式吧。有一种是把宽度根据设计稿写死，比如设计稿是640，那你就利用viewport把整体宽度定死为640，写的时候就比较方便，量到设计稿里面的元素是多少px，页面上就直接写好啦，然后根据当前设备的宽度跟640的比例进行一个整体的缩放。这种的话直接px就好。