本文主要介绍了js实现rem自动匹配计算font-size的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
实际开发过程中，我们经常会被各种宽度，高度计算搞晕。尤其是使用了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这么老呢？大家不仿试试，还蛮有意思，说不定这个就是主流的度量单位了。
完整实例代码：
nbsp;html>响应式布局 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;}页面头部
左
中
右
左
中
右
//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)
登录后复制
相关推荐：
html5页面rem布局适配方法详解
javascript用rem来做响应式开发实例分享
rem绝对自适应方案解析
以上就是js实现rem自动匹配计算font-size的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2790860.html
