自适应rem.js
用rem.js来实现自适应屏幕大小，要注意border不用rem做单位
代码如下：
1 (function (doc, win) { 2 //orientationchange : 判断手机是水平方向还是垂直方向，感应方向 3 4 //doc ==》 document对象 5 //doc.documentElement ==> 得到文档的根元素--> <html> 6 //之所以要得到文档的根元素，是为了计算网页所打开时屏幕的真实宽度 7 var docEl = doc.documentElement, 8 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', 9 recalc = function () { 10 var clientWidth = docEl.clientWidth; 11 //获取不同移动端设备上的宽度 12 if (!clientWidth) return; 13 //320 是我们默认的手机屏幕 14 //clientWidth 是我们页面打开时所得到的屏幕（可看见页面的真实宽度）宽度真实的宽度值 15 //这两者相除得到一个放大或缩小的比例值 16 //320 ip5 --> 20px 17 //375 ip6 18 //414 ip6s --> 25px; 19 //width:2rem; 20 docEl.style.fontSize = 20 * (clientWidth / 750) + 'px';//750是iphone6像素的二倍 21 //设置根元素font-size 10.4167px 22 }; 23 /*600px 24 20 * 600/320 -- > [2 -- 3] 放大范围 25 26 200/320 -- > [0.5 -- 0.1] 缩小*/ 27 if (!doc.addEventListener) return; 28 win.addEventListener(resizeEvt, recalc, false); 29 doc.addEventListener('DOMContentLoaded', recalc, false); 30 //当dom加载完成时，或者 屏幕垂直、水平方向有改变进行html的根元素计算 31 })(document, window); 32 33 //如果你不想进行一个响应式设计的开发，你可以直接把font-size写死
后来看了一篇文章http://www.w3cplus.com/css/when-to-use-em-vs-rem.html
里面提到，结合
rem 单位的方式给html元素设置了一个固定的px单位，这种很普遍的做法，改变html元素的字体大小时，可以使整个页面做相应调整。但是，它重写继承了用户设置的浏览器字体大小。 更夸张的说，这剥削了用户自行调整以获得最佳视觉效果的能力。
他建议：如果确实需要更改 html 元素的字体大小，那么就使用em，rem单位，这样根元素的值还会是用户浏览器字体大小的乘积。这将允许您通过更改您的 html 元素的字体大小，调整你的设计，但仍会保留用户的浏览器设置的效果。
按照我的理解，上述代码就可以修改为：
1 (function (doc, win) { 2 //orientationchange : 判断手机是水平方向还是垂直方向，感应方向 3 4 //doc ==》 document对象 5 //doc.documentElement ==> 得到文档的根元素--> <html> 6 //之所以要得到文档的根元素，是为了计算网页所打开时屏幕的真实宽度 7 var docEl = doc.documentElement, 8 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', 9 recalc = function () { 10 var clientWidth = docEl.clientWidth; 11 //获取不同移动端设备上的宽度 12 if (!clientWidth) return; 13 //320 是我们默认的手机屏幕 14 //clientWidth 是我们页面打开时所得到的屏幕（可看见页面的真实宽度）宽度真实的宽度值 15 //这两者相除得到一个放大或缩小的比例值 16 //320 ip5 --> 20px 17 //375 ip6 18 //414 ip6s --> 25px; 19 //width:2rem; 20 docEl.style.fontSize = 1.25 * (clientWidth / 750) + 'rem';//单位变成了rem 21 //设置根元素font-size 10.4167px 22 }; 23 /*600px 24 20 * 600/320 -- > [2 -- 3] 放大范围 25 26 200/320 -- > [0.5 -- 0.1] 缩小*/ 27 if (!doc.addEventListener) return; 28 win.addEventListener(resizeEvt, recalc, false); 29 doc.addEventListener('DOMContentLoaded', recalc, false); 30 //当dom加载完成时，或者 屏幕垂直、水平方向有改变进行html的根元素计算 31 })(document, window); 32 33 //如果你不想进行一个响应式设计的开发，你可以直接把font-size写死
不知道这样的做法是否正确，在我的使用中没有出现问题。欢迎大家指正。
