rem自动计算
2024-09-08 18:59:47
写法一:
//rem自动计算
(function (designWidth, maxWidth, viewWidth) {
var doc = document,
win = window,
docEl = doc.documentElement,
remStyle = document.createElement("style"),
tid; function refreshRem() {
var width = docEl.getBoundingClientRect().width;
maxWidth = maxWidth || 540;
width > maxWidth && (width = maxWidth);
var rem = width * 100 / designWidth;
if (viewWidth == null || viewWidth < maxWidth) {
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
} else {
remStyle.innerHTML = 'html{font-size:' + rem + 'px; max-width:' + viewWidth + 'px; margin: auto}';
}
} if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(remStyle);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(remStyle);
doc.write(wrap.innerHTML);
wrap = null;
}
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);
}
})(750, 750);
写法二:
//修改页面title
var pageTitle=document.getElementsByTagName("title")[0].innerHTML;
if(location.href.indexOf("index.html")>-1 || location.href.indexOf("html")==-1){
document.getElementsByTagName("title")[0].innerHTML="一汽-大众商城-一汽-大众官方电商平台-只为简单汽车生活";
}
//微信JSSDK
document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>');
//rem自动计算
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}; if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
写法三:
//rem自动计算
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}; if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
最新文章
- Myeclipse 构建工作空间出错
- easyui-textbox回车事件
- maven不打包子模块资源文件
- 在Debian上用Bind 配置DNS服务器
- 【WEB】原理 之 线程池
- 【转】VMware 11安装Mac OS X 10.10
- 压力测试工具:tsung
- 启用PowerShell Web Access
- IIC 概述之3
- 深入理解ajax系列第四篇——FormData
- 理解Java中的抽象
- java线程间通信:一个小Demo完全搞懂
- 微信小程序-参数传递与事件处理
- eclipse新建工作空间后的常用设置
- electron入坑指南
- c++中STL容器中的排序
- 利用搜狐新闻语料库训练100维的word2vec——使用python中的gensim模块
- Dijkstra算法:任意两点间的最短路问题 路径还原
- 057 Hive项目案例过程
- Comparing Differently Trained Models
热门文章
- C++编程笔记(STL学习)
- 4.10:Spark之wordcount
- 【大数据面试】Flink 04:状态编程与容错机制、Table API、SQL、Flink CEP
- 重学c#系列—— 反射的基本理解[三十三]
- 从工具到实践:如何在GitHub上保障开源项目安全?
- 基于Chromium开发的称重软件,集称重、计价、打印于一体,支持耀华、顶尖等多个厂家设备型号
- HelloGitHub 最受欢迎的开源项目 Top10(2022年)
- 学习.NET MAUI Blazor(五)、修改Window窗口标题
- windows11预览版装WSA心得
- 电脑微信小程序抓包