rem与1px

一说到自适应的设计，大家可能会想到使用百分比布局，当然还有另外一种方法，使用rem，今天练习做了一个移动端的活动页面，使用的就是rem，总的来说rem是非常好用的，但是今天陷入了一个坑，想了半天才想明白，所以想跟大家分享下，以免更多朋友掉进这个坑里。

what's rem?

大家应该听说过em，em是基于父元素字体大小而变化的单位，在这点上rem与它不同，rem的大小只和根元素（html）的font-size值有关，如果我们通过如下代码动态的设置html的字体大小，rem就会跟着动态变化，然后我们设置其他元素大小时使用rem做为单位，从而达到等比例缩放的效果。

举个栗子

正如下面的例子，在计算某个元素的大小是多少rem时，我们需要在UI文件中测量出元素的大小，然后除以屏幕的总宽，所得的数值就是元素应该设置的大小。

网上随便找的一个图片.png

假设这个图片素材的宽度是640px，如果我们使用上面的语句进行设置，那对于640px宽的屏幕，html的font-size属性值就是64px，也就是说这种屏幕的1rem就是64px；通过测量，蓝色矩形框的宽度是300px，300除以64等于4.6875，也就是说，我们在写页面的时候，需要将蓝色矩形框的宽度设置为4.6875rem，这样无论多大的屏幕，蓝色框部分的宽都可以自适应缩放了

说好的坑在哪里？

挖坑的时候到了，也许有人已经注意到了，UI文件的每个元素都要除以64这个数字，其实64这个数字还好，如果UI文件的宽度是70，那难免会有除不开的情况，但像素这种东西又不能切成两半，所以只能四舍五入了，问题就在这！如果你设置的这个数值是一个div的left值，那这个div必然不会处在整个屏幕的居中位置，这就是我们说到的坑。
可能你会想，居中的方法有很多，不用这个烂方法不就可以了？当然，居中一般是不会用这种方法的，之所以举这个例子，是因为具体的说明坑在哪。下面这个例子才是坑的常见场景。

商铺列表的左侧空隙和右侧空隙不相等

在使用margin设置列表的左侧间距时，由于四舍五入的问题，导致左侧的margin比右侧小1px，这种问题除非换方法，否则无法修复

如何避免

个人认为可从两个方面考虑：

1. UI文件的宽度做适当控制，比如640px是2的倍数，所以比较容易除开
2. 从方法上避免掉进坑里，这个需要根据实际场景看使用什么方法，但这个方法需要一定积累