使用rem缩放网页的javascript代码
2024-10-11 05:54:24
<script type="text/javascript">
(function(doc, win) {
var docEl = doc.documentElement,
isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
dpr = window.top === window.self ? dpr : 1, //被iframe引用时,禁止缩放
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
docEl.dataset.dpr = dpr;
var recalc = function() {
var width = docEl.clientWidth;
var designWidth=320;
if (width / dpr > designWidth) {
width = designWidth * dpr;
}
docEl.dataset.width = width
docEl.dataset.percent = 100 * (width / designWidth);
docEl.style.fontSize = 100 * (width / designWidth) + 'px';
};
recalc()
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
})(document, window);
</script>
请修改设计图的宽度designWidth。这段代码的好处是根元素font-size是100 计算方便,若要给页面设置宽度 1080 = 10.8rem 640 = 6.4rem 等,字号的话直接根据设计图除以100即可
——
最新文章
- Newtonsoft.Json异常处理
- Ubuntu ssh服务安装
- LeakCanary 中文使用说明
- 21.Android之SQLite数据库学习
- loadrunner关联边界乱码
- word2010表格中的内容怎么设置行距
- Spring MVC数组绑定
- Linux--------------安装vsftpd
- hdu4497 正整数唯一分解定理应用
- 对LCS算法及其变种的初步研究
- VS Code 1.28版本设置中文界面的方法
- Java_日期时间相关类
- 详解Javascript中prototype属性(推荐)
- Linux命令之tee - 重定向输出到多个文件
- every day a practice —— morning(3)
- Codeforces Round #475 (Div. 2) C - Alternating Sum
- File storage location distribution in firmware using binwalk
- From Alpha to Gamma (II)
- RadioButtonFor值为false.默认选中的问题
- php -- 魔术方法 之 判断属性是否存在或为空:__isset()