淘宝网触屏版为什么rem跟px混用？有什么好处？为什么不都用rem?-H5 Tutorial-php.cn

淘宝网触屏版为什么rem跟px混用？有什么好处？为什么不都用rem?

WBOY

Release： 2016-06-07 08:42:59

Original

1960 people have browsed it

回复内容：

自荐两篇文章：

移动端适配方案(上) · Issue #17 · riskers/blog · GitHub
移动端适配方案(下) · Issue #18 · riskers/blog · GitHub

还有一个分享时的PPT：

移动端页面适配方案

希望能够对你帮助就如刘宁(知乎好多刘宁，手机艾特一下翻了好几页没找到) 所说，不是所有元素都需要缩放的。

最容易举例的就是1px的border，无论什么屏，无论像素密度多少，都要准确的显示1物理像素(物理像素与逻辑像素与像素密度请咨询谷大哥)。

淘宝目前的做法即是，通过脚本检测设备的像素密度，再设置文档的根font-size与viewport的缩放值，从而让px能够准确的显示为物理像素。

讲的比较乱，回头再更

@mablevi自由就好
我们的做法是：获取设备像素密度后，设置根节点的fontSize，然后文档中全部使用rem+px结合。

window.onload = function () {
    var nameAttr = document.createAttribute('name');
    nameAttr.value = 'viewport';
    var contentAttr = document.createAttribute('content');
    var dpr = window.devicePixelRatio || 1;
    contentAttr.value = 'width=device-width,initial-scale=' + (1 / dpr) + ',target-densitydpi=device-dpi,user-scalable=no';
    var element = document.createElement('meta');
    element.attributes.setNamedItem(nameAttr);
    element.attributes.setNamedItem(contentAttr);
    document.head.appendChild(element);
    document.getElementsByTagName('html')[0].style.fontSize = (16 * dpr) + 'px';
};
Copy after login

在页面交互，视觉设计上，不是所有元素的大小都是需要跟随设备尺寸不同而变换的。

rem单位会出现一些边界情况。比如，雪碧图背景的元素使用rem就会掉入一两个像素的偏差的陷阱。 

其次不明白手淘为啥使用脚本去捕获当前设备的尺寸大小来设置根的font-size。我比较推荐使用mediaquery断点形式去设置font-size，因为那样更自然。

可能是开发过程中,开始使用rem来尝试做适应吧,基于以前的一些代码,慢慢替换.

用MX4的同学访问手淘触屏版有异常么？ 
前天测试的时候 alert出screen.width  的数值是物理分辨率的数值。
没百度到这个问题，就我一人遇到么。。。。

移动端适配等式:
设备宽度/设计稿宽度 = 某个元素某一距离实际值/该元素在设计稿的值
例子:
一个5s宽度320/设计稿宽度640 = 一个元素的高度未知/设计稿上它的高度为20


可以推出它的实际高度为10，通常我们使用rem作为等式前的值，但是因为太小无法作为html根字体大小使用，所以适当放大，通常为了方便计算，放大100倍，即为:
document.documentElement.fontSize = document.documentElement.clientWidth / 640 (或实际设计稿宽度) * 100
那么此时在设计稿上量的的某一距离，比如43px，就等于0.43rem。


至于文字，我们通常不用rem，因为由于不同的rem计算方式会产生很多奇怪的大小，使得文字出现糊掉或者模糊的情况，通常我们使用媒体查询事先设置好body的字体大小，这样来确保文字的正常显示。
即为:rem处理适配距离的问题，em处理文字大小问题。


详见:
http://www.chengfeilong.com/mobile-layout

我是winter，匿名答。

rem用于随屏幕伸缩的尺寸。px用于正文文字大小、细边框等不宜随屏幕伸缩的尺寸。

考虑到字体的点阵信息，一般文字尺寸多会采用 16px 20px 24px等值，若以rem指定文字尺寸，会产生诸如21px，19px这样的值，会导致字形难看，毛刺，甚至黑块，故大部分文字应该以px设置。

一般标题类文字，可能也有要求随屏幕缩放，且考虑到这类文字一般都比较大，超过30px的话，也可以用rem设置字体。

那个百姓网的刘宁同学，Android有多少种尺寸你造么……

其实是中间采用了两个库：lib-flexible.js和scroll.js，其中lib-flexible采用rem，而scroll.js模拟滚动采用的px，这个要问下作者了 @winter

关于这个问题，有一篇专门的文章在这里，自己看：http://div.io/topic/1092