标签：class 移动 ges show doc dde ext load var
rem是根据html的font-size大小来变化，正是基于这个出发，我们可以在每一个设备下根据设备的宽度设置对应的html字号，从而实现了自适应布局。更多介绍请看这篇文章：rem是如何实现自适应布局的。
目前有两种，一种是根据js来调整html的字号，另一种则是通过媒体查询来调整字号。
(function(designWidth, maxWidth) { var doc = document, win = window; var docEl = doc.documentElement; var tid; var rootItem,rootStyle; function refreshRem() { var width = docEl.getBoundingClientRect().width; if (!maxWidth) { maxWidth = 540; }; if (width > maxWidth) { width = maxWidth; } //与淘宝做法不同，直接采用简单的rem换算方法1rem=100px var rem = width * 100 / designWidth; //兼容UC开始 rootStyle="html{font-size:"+rem+‘px !important}‘; rootItem = document.getElementById(‘rootsize‘) || document.createElement("style"); if(!document.getElementById(‘rootsize‘)){ document.getElementsByTagName("head")[0].appendChild(rootItem); rootItem.id=‘rootsize‘; } if(rootItem.styleSheet){ rootItem.styleSheet.disabled||(rootItem.styleSheet.cssText=rootStyle) }else{ try{rootItem.innerHTML=rootStyle}catch(f){rootItem.innerText=rootStyle} } //兼容UC结束 docEl.style.fontSize = rem + "px"; }; refreshRem(); win.addEventListener("resize", function() { clearTimeout(tid); //防止执行两次 tid = setTimeout(refreshRem, 300); }, false); win.addEventListener("pageshow", function(e) { if (e.persisted) { // 浏览器后退的时候重新计算 clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false); if (doc.readyState === "complete") { doc.body.style.fontSize = "16px"; } else { doc.addEventListener("DOMContentLoaded", function(e) { doc.body.style.fontSize = "16px"; }, false); } })(640, 640);
你可以把上面的代码内嵌到html的head中，换算比例是1rem=100px，为了计算方便，你可以在我的一个github项目下载完整的结构和一个压缩的js。
上面代码中的关键代码是：
var width = docEl.getBoundingClientRect().width; var rem = width * 100 / designWidth; docEl.style.fontSize = rem + "px";
说到底，上面的js代码不就是根据不同的设备调整对应的html字号嘛，那么我们根据实际的设备，来加上相应的字号不就行了吗？
我们知道html的默认字号是16px，则对应的设备下可以通过设置对应的font-size使其有一致的缩放比例。
html { font-size: 62.5% } @media only screen and (min-width: 481px) { html { font-size:94%!important } } @media only screen and (min-width: 561px) { html { font-size:109%!important } } @media only screen and (min-width: 641px) { html { font-size:125%!important } body { max-width: 640px } }
上面的代码则是通过1rem=20px来换算的，从哪里看出来呢？从最大的一个值640出发，假如你的设计稿是750的话，那你还要设计更多的媒体 查询，换算比例保持一致就可以了。那如果我想要换算比例为1rem=100呢？按照上面的规则，最大的值为：html:font- size:100/16*100%，其它的则按比例，比如480px，则为480/640*(100/16*100%)。
标签：class 移动 ges show doc dde ext load var
原文地址：https://www.cnblogs.com/lihuijuan/p/9459715.html
