当前位置:网站首页>移动端通过设置rem使页面内容及字体大小自动调整
移动端通过设置rem使页面内容及字体大小自动调整
2022-07-07 08:10:00 【weixin_42178670】
移动端通过设置rem实现页面内容及字体大小自动调整
function setRem(){
var rem = document.documentElement.clientWidth / 10; // 把设备屏幕宽度十等分
document.documentElement.style.fontSize = rem + "px"; // 把文档根字体设置成设备宽度的1/10
}
setRem();
window.addEventListener("resize", setRem); // 添加resize事件,当窗口调整时同步调整文档根字体大小
window.addEventListener("pageShow", function(e) {
// 添加pageShow事件,在页面显示时触发
if(e.persisted) {
// 判断是否是缓存中取的页面,true即是缓存中取的页面,触发设置根字体的函数
setRem();
}
})
pageShow事件和load事件一样,均是加载页面时即执行函数,通过点击a标签,F5刷新以及点击前进后退按钮均可刷新页面并执行load事件。但火狐有个往返缓存,保留页面数据以及DOM和JS状态,也就是说整个页面均被缓存,所以点击后退也不能刷新页面,所以可以通过pageShow触发,通过判断是否是缓存中取的页面来进行触发
边栏推荐
- LLVM之父Chris Lattner:為什麼我們要重建AI基礎設施軟件
- fiddler-AutoResponder
- Can I open a stock trading account online? Is it safe
- Postman interface test VI
- ORM model -- creation and query of data records
- Guid主键
- [learning notes - Li Hongyi] Gan (generation of confrontation network) full series (I)
- LLVM之父Chris Lattner:为什么我们要重建AI基础设施软件
- 【学习笔记-李宏毅】GAN(生成对抗网络)全系列(一)
- Postman interface test IV
猜你喜欢
PDF文档签名指南
【学习笔记-李宏毅】GAN(生成对抗网络)全系列(一)
XML配置文件解析与建模
Remote meter reading, switching on and off operation command
【acwing】786. 第k个数
每周推荐短视频:L2级有哪些我们日常中经常会用到的功能?
ORM -- grouping query, aggregation query, query set queryset object properties
一文讲解单片机、ARM、MUC、DSP、FPGA、嵌入式错综复杂的关系
字符串格式化
The new activity of "the arrival of twelve constellations and goddesses" was launched
随机推荐
Or in SQL, what scenarios will lead to full table scanning
根据设备信息进行页面跳转至移动端页面或者PC端页面
【acwing】786. Number k
C#记录日志方法
A wave of open source notebooks is coming
Using keras in tensorflow to build convolutional neural network
mysql插入数据创建触发器填充uuid字段值
大整数类实现阶乘
JMeter installation
Inno setup packaging and signing Guide
ORM--查询类型,关联查询
Study summary of postgraduate entrance examination in July
Apprentissage avancé des fonctions en es6
Methods of adding centerlines and centerlines in SolidWorks drawings
Learning records - high precision addition and multiplication
Postman interface test VII
【HigherHRNet】 HigherHRNet 详解之 HigherHRNet的热图回归代码
反射效率为什么低?
Bit operation ==c language 2
Fiddler break point