移动端H5知识[系列] - 处理rem小数点 flexible.js

HTML5学堂：在移动端中，我们常常因为自适应而烦恼，用百分百当然可以，但是高度呢？显然是有问题的，那么字体在不同手机显示的比例呢？显然是有问题的。因此会用到H5的单位rem，但是有时候会出现小数点的rem,本文提到是引用flexible.js解决小数点问题，希望本文能帮助大家！谢谢！

本文来自梦幻雪冰

在开发手机端页面的时候，使用了rem单位，实现上比%、em等其他的做法更简单了，它可以实现高度和宽度等比例变化。好东西是好，但是不好的一点是rem的小数点。比如下图的情况。

欢迎沟通交流~HTML5学堂

如何进行处理？保证字体大小在有效的小位数之内。

先来理解一个数学问题，如何保证一个数除以另外一个数能被除尽。思考一下，偶数除以2的倍数，结果会是多少？结果肯定是可以被除尽。所以我只要保证被除数是偶数，除数是2的倍数。

现在引入手机淘宝也使用的一个框架点击下载 访问密码 59e8

使用方法：

解析代码：

先来看看，下面的例子，获取的页面宽度是多少？

模拟器的iPhone4下的结果：

模拟器的iPhone6 Plus下的结果：

欢迎沟通交流~HTML5学堂

为什么会是两倍关系？

注意观察，meta中initial-scale=0.5缩放，意思是对页面进行缩小的缩放。首先我们先来讨论一下缩放的问题，缩放值越大，当前viewport的宽度就会越小，反之亦然。例如在iphone中，ideal viewport的宽度是320px，如果我们设置 initial-scale=2 ，此时viewport的宽度会变为只有160px了，这也好理解，放大了一倍嘛，就是原来1px的东西变成2px了，但是1px变为2px并不是把原来的320px变为640px了，而是在实际宽度不变的情况下，1px变得跟原来的2px的长度一样了，所以放大2倍后原来需要320px才能填满的宽度现在只需要160px就做到了。因此，我们可以得出一个公式：

移动设备可用布局宽度 = 浏览器的视口宽度（设备屏幕大小）/ 缩放值；

因为缩放值是0.5，所以移动设备可用布局宽度的是浏览器的视口宽度2倍。然后这个可用布局宽度除以2的倍数就可以保证被除数可以被除尽了。

效果如下：

陈能堡：2015年08月27日开发手记 —— 关于meta，我们讲到，该框架会自动添加进去，但是今日发现如果在页面中不先写meta的话，安卓手机下的border、阴影解析出现问题，会变粗。因此，最好还是手动添加进去。