实际开发过程中，我们经常会被各种宽度，高度计算搞晕。尤其是使用了rem的计算方式，自适应布局难倒一大片程序员。为了解决这类问题，我觉得可以利用js监听屏幕宽度变化来实现更改html 根元素font-size的值。
下面是相关javascript的实现代码：
(function (doc, win) { var docel = doc.documentelement, resizeevt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientwidth = docel.clientwidth; if (!clientwidth) return; if(clientwidth>=640){ docel.style.fontsize = '100px'; }else{ docel.style.fontsize = 100 * (clientwidth / 640) + 'px'; } }; if (!doc.addeventlistener) return; win.addeventlistener(resizeevt, recalc, false); doc.addeventlistener('domcontentloaded', recalc, false); })(document, window);
此代码选640px为基准值，为什么选640呢，
640px的页面宽度是一个安全的最大宽度，保证了移动端页面两边不会留白。注意这里的px是css逻辑像素，与设备的物理像素是有区别的。如iphone 5使用的是retina视网膜屏幕，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel，所以设备像素数为640 x 1136px，而它的css逻辑像素数为320 x 568px。
所以当要切移动端的页面的时候，需要把效果图宽度等比例缩放到640px。
比如当页面中某一p的宽度为60，高度为65的时候，就可以直接这样写样式：
{ width:0.6rem; height:0.65rem }
浏览器的兼容性
rem是css3新引进来的一个度量单位，大家心里肯定会觉得心灰意冷呀，担心浏览器的支持情况。其实大家不用害怕，你可能会惊讶，支持的浏览器还是蛮多的，比如：mozilla firefox 3.6+、apple safari 5+、google chrome、ie9+和opera11+。只是可怜的ie6-8无法，你们就把他们当透明了吧，我向来都是如此。
不过使用单位设置字体，可不能完全不考虑ie了，如果你想使用这个rem，但也想兼容ie下的效果，可你可考虑“px”和“rem”一起使用，用px来实现ie6-8下的效果，然后使用“rem”来实现代浏览器的效果。就让ie6-8不能随文字的改变而改变吧，谁让这个ie6-8这么老呢？大家不仿试试，还蛮有意思，说不定这个就是主流的度量单位了。
完整实例代码：
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> <meta content="telephone=no" name="format-detection" /> <meta name="format-detection" content="email=no" /> <meta http-equiv="cache-control" content="no-cache"/> <title>响应式布局</title> <style> html{font-size: 20px;width: 100%;height: 100%;} body{margin: 0;padding: 0;} header,footer{width: 100%;background: #17a578;color: #fff;font-size:1rem;text-align: center;line-height: 2rem;} .footer{position: fixed;bottom: 0;} .box{} .public{width: 5rem;height: 5rem;font-size: 1.2rem;display: inline-block;text-align: center;color: #fff;line-height: 5rem;margin-top: 1rem;} .left{background: #f00;} .center{background: #048f74;} .right{background: #000;} </style> </head> <body> <header>页面头部</header> <p class="box"> <p class="public left">左</p> <p class="public center">中</p> <p class="public right">右</p> <p class="public left">左</p> <p class="public center">中</p> <p class="public right">右</p> </p> <footer class="footer">页面底部</footer> <script> //orientationchange方向改变事件 (function (doc, win) { var docel = doc.documentelement,//根元素html //判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回resize方法。 resizeevt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientwidth = docel.clientwidth; if (!clientwidth) return; //把document的fontsize大小设置成跟窗口成一定比例的大小，从而实现响应式效果。 docel.style.fontsize = 20 * (clientwidth / 320) + 'px'; }; //alert(docel) if (!doc.addeventlistener) return; win.addeventlistener(resizeevt, recalc, false);//addeventlistener事件方法接受三个参数：第一个是事件名称比如点击事件onclick，第二个是要执行的函数，第三个是布尔值 doc.addeventlistener('domcontentloaded', recalc, false)//绑定浏览器缩放与加载时间 })(document, window); //alert(document.documentelement.clientwidth/320) </script> </body> </html>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
gulp安装+打包+合并最详解
在ie11下里使用canvas.todataurl兼容性问题的解决思路
以上就是js如何匹配计算font-size的详细内容。