js实现rem布局
2017-10-31 23:49
218 查看
;(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);
相关文章推荐
- REM 布局学习,精华是JS
- HTML5实现移动端之-rem布局
- ajax和js实现瀑布流布局
- js实现主页布局的拖拽功能
- rem是如何实现自适应布局的
- js中flexible.js实现淘宝弹性布局方案
- 原生JS实现美图瀑布流布局赏析
- 【转】绝对定位:JS照样实现瀑布流式布局
- div+css布局的图片连续滚动js实现代码
- 掌握面试——弹出框的实现(一道题中包含布局/js设计模式)
- rem是如何实现自适应布局的?
- rem是如何实现自适应布局的
- js实现的瀑布流布局
- DIV+AJAX+JS+JSP实现页面拖动并且保存布局COOKIE值到数据库
- 由于设计页面需要,要把两个并排显示的 div 实现一样高的效果, n 行 n 列布局,每列高度(事先并不能确定哪列的高度)相同,每个设计师追求的目标。方法有以下几种: 1 JS 实现(判断 2 个 d
- js实现图片瀑布流布局
- 原生js实现瀑布流布局
- vue.js通过路由实现经典的三栏布局实例代码
- rem是如何实现自适应布局的
- 利用rem实现webapp布局