js实现rem布局
来源:互联网 发布:手机免root数据恢复apk 编辑:程序博客网 时间:2024/06/10 15:53
;(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);
阅读全文
0 0
- js实现rem布局
- rem布局js设置
- rem布局实现自适应
- 移动端rem布局之common.js
- 移动端rem布局js设置
- 使用单位rem实现响应式布局
- 使用rem单位实现布局自适应
- HTML5实现移动端之-rem布局
- rem是如何实现自适应布局的?
- 利用rem实现响应式布局
- html5如何利用rem实现自适应布局
- rem是如何实现自适应布局的?
- rem布局
- rem布局
- rem布局
- H5+JS+相对单位rem实现第三方支付页(输入金额+模拟数字键盘+自适应布局+大写金额)
- 响应式布局 css3 media 媒体查询 和js+rem
- rem自适应布局-移动端自适应必备:flexible.js
- react-starter-kit 学习之eslint 规则
- CF878D
- synchronized的锁对象的特点
- 队列
- 求 n!
- js实现rem布局
- 微信小程序的if标签和for循环
- [UnityShader基础]基本概念
- Generics
- Mysql总结3-mysql常用函数
- 微信小程序事件
- JAVA 面试重点知识总结
- 198. House Robber
- 设计模式之工厂模式(个人理解)