flexible.js分析--JavaScript
2024-09-01 08:37:30
//立即执行函数
(function flexible(window, document) {
// 获取的html 的根元素
var docEl = document.documentElement;
// dpr 物理像素比
var dpr = window.devicePixelRatio || 1;
// adjust body font size 设置我们body 的字体大小
function setBodyFontSize() {
// 如果页面中有body 这个元素 就设置body的字体大小
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px';
} else {
// 如果页面中没有body 这个元素,则等着 我们页面主要的DOM元素加载完毕再去设置body
// 的字体大小
document.addEventListener('DOMContentLoaded', setBodyFontSize);
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10 设置我们html 元素的文字大小
function setRemUnit() {
var rem = docEl.clientWidth / 10;
docEl.style.fontSize = rem + 'px';
}
setRemUnit();
// reset rem unit on page resize 当我们页面尺寸大小发生变化的时候,要重新设置下rem 的大小
window.addEventListener('resize', setRemUnit);
// pageshow 是我们重新加载页面触发的事件
window.addEventListener('pageshow', function(e) {
// e.persisted 返回的是true 就是说如果这个页面是从缓存取过来的页面,也需要从新计算一下rem 的大小
if (e.persisted) {
setRemUnit();
}
});
// detect 0.5px supports 有些移动端的浏览器不支持0.5像素的写法
if (dpr >= 2) {
var fakeBody = document.createElement('body');
var testElement = document.createElement('div');
testElement.style.border = '.5px solid transparent';
fakeBody.appendChild(testElement);
docEl.appendChild(fakeBody);
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines');
}
docEl.removeChild(fakeBody);
}
}(window, document));
最新文章
- ffmpeg用法及如何使用fluent-ffmpeg
- windows下利用virtual 安装 flask
- Delphi 中同类型方法的说明
- BZOJ1036 树的统计
- 分页控件-ASP.NET(AspNetPager)
- virsh命令
- ajax_for example
- C语言到底怎么了?
- Xcode断点的一些黑魔法
- 一步一步学python(三) - 使用字符串
- Promise和异步编程
- 学习笔记-echarts x,y轴样式
- Python内置函数(56)——set
- 专业的“python爬虫工程师”需要学习哪些知识?
- 决策树(decision tree)
- (笔记)ubuntu下安装jdk
- sublime3 快速生成html头文件
- python之旅:面向对象进阶
- VOIP NAT穿越之SIP信令穿越
- 随笔 -- IO -- Socket/ServerSocket -- 系统概述
热门文章
- Python 命令行之旅:使用 argparse 实现 git 命令
- cogs249 最长公共子串(后缀数组 二分答案
- HDU2485Destroying the bus stations 拆点网络流求割点个数
- 2019 HZNU Winter Training Day 15 Comprehensive Training
- 【5】SVM算法原理
- 【入门】广电行业DNS、DHCP解决方案详解(三)——DNS部署架构及案
- 阿里云 windows frp 远程桌面
- 2019-2020-1 20199322《Linux内核原理与分析》第一周作业
- Winform中使用FastReport实现简单的自定义PDF导出
- 即时聊天APP(四) - 联系人和会话