第148天：js+rem动态计算font-size的大小，适配各种手机设备

需求：

在不同的移动终端设备中实现，UI设计稿的等比例适配。

方案：

布局排版都用REM做单位，然后不同宽度的屏，JS动态计算根节点的字体大小。

假设设计稿是宽750px来做的，书写的CSS方便计算考虑，根节点的字体大小假定为100像素，得出设备宽为7.5rem。设计稿中标注的任何像素数值都可以换算成PX / 100的REM值。

就是说，每一个设备的宽度都定为7.5个REM，然后宽度非750px的设备里，就需要用JS对字体大小做动态计算。

换算关系为：根节点的字体大小=设备宽度/7.5。

即：document.documentElement.style.fontSize = document.documentElement.clientWidth *（window.devicePixelRatio || 1）/ 7.5 +'px';

注：需要考虑到DPR，即一倍屏两倍屏的问题。

http://mobile.51cto.com/web-484304.htm

备注：

每个浏览器对最小字体大小的支持，不尽相同的.js动态计算的字体大小值太小时，会导致超小屏上的用户界面显示效果比预想中的偏大。

比如，字体大小计算是10px的，但是铬只支持到12像素，他就按照12px的去渲染了，这就会导致UI偏大了。（上面方案中的100像素肯定是没有问题的）

具体表现：

浏览器最小支持font-size

PC chrome 12px（可以通过安装高级字体设置插件支持到6px）

Android和iOS 1px（只测试了主流浏览器，未做充分测试）

cordova（Android和iOS）9px

 

// orientationchange方向改变事件

（function（doc，win）{

var docEl = doc.documentElement，//根元素html

//判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回大小调整方法。

resizeEvt ='orientationchange'在窗口中？'orientationchange'：'调整大小'，

recalc = function（）{

var clientWidth = docEl.clientWidth;

if（！clientWidth）返回;

//把文件的fontSize的大小设置成跟窗口成一定比例的大小，从而实现响应式效果。

docEl.style.fontSize = 20 *（clientWidth / 320）+'px';

};

//警报（docEl）

if（！doc.addEventListener）返回;

win.addEventListener（resizeEvt，recalc，false）; // addEventListener事件方法接受三个参数：第一个是事件名称比如点击事件onclick，第二个是要执行的函数，第三个是布尔值

doc.addEventListener（'DOMContentLoaded'，recalc，false）//绑定浏览器缩放与加载时间

}）（文件，窗口）;

//alert(document.documentElement.clientWidth/320）