当前位置:网站首页>The mobile terminal automatically adjusts the page content and font size by setting rem
The mobile terminal automatically adjusts the page content and font size by setting rem
2022-07-07 10:24:00 【weixin_ forty-two million one hundred and seventy-eight thousan】
Mobile end pass setting rem Realize automatic adjustment of page content and font size
function setRem(){
var rem = document.documentElement.clientWidth / 10; // Divide the screen width of the device into ten equal parts
document.documentElement.style.fontSize = rem + "px"; // Set the document root font to the device width 1/10
}
setRem();
window.addEventListener("resize", setRem); // add to resize event , Adjust the document root font size synchronously when the window is adjusted
window.addEventListener("pageShow", function(e) {
// add to pageShow event , Trigger... When the page is displayed
if(e.persisted) {
// Determine whether it is a page fetched from the cache ,true That is, the page fetched from the cache , Trigger the function that sets the root font
setRem();
}
})
pageShow Events and load Events like , All functions are executed when the page is loaded , By clicking on a label ,F5 Refresh and click the forward and backward buttons to refresh the page and execute load event . But Firefox has a round-trip cache , Keep page data and DOM and JS state , That is, the entire page is cached , So clicking back cannot refresh the page , So you can go through pageShow Trigger , Trigger by judging whether it is a page fetched from the cache
边栏推荐
- 一文讲解单片机、ARM、MUC、DSP、FPGA、嵌入式错综复杂的关系
- Prototype object in ES6
- Leetcode exercise - 113 Path sum II
- Weekly recommended short videos: what are the functions of L2 that we often use in daily life?
- LLVM之父Chris Lattner:为什么我们要重建AI基础设施软件
- ORM -- query type, association query
- Postman interface test VII
- HAL库配置通用定时器TIM触发ADC采样,然后DMA搬运到内存空间。
- Smart city construction based on GIS 3D visualization technology
- Easyexcel read write simple to use
猜你喜欢
求方程ax^2+bx+c=0的根(C语言)
Wallys/IPQ6010 (IPQ6018 FAMILY) EMBEDDED BOARD WITH ON-BOARD WIFI DUAL BAND DUAL CONCURRENT
Fiddler simulates the interface test
Experience sharing of software designers preparing for exams
01 use function to approximate cosine function (15 points)
Postman interface test III
Google colab loads Google drive (Google drive is used in Google colab)
ORM model -- associated fields, abstract model classes
Weekly recommended short videos: what are the functions of L2 that we often use in daily life?
ISP、IAP、ICP、JTAG、SWD的编程特点
随机推荐
JMeter about setting thread group and time
Factorial implementation of large integer classes
ORM -- grouping query, aggregation query, query set queryset object properties
Pdf document signature Guide
Embedded background - chip
Download Text, pictures and ab packages used by unitywebrequest Foundation
Methods of adding centerlines and centerlines in SolidWorks drawings
根据设备信息进行页面跳转至移动端页面或者PC端页面
大整数类实现阶乘
ES6中的原型对象
Es classes and objects, prototypes
Postman tutorial - scripting
柏拉图和他的三个弟子的故事:如何寻找幸福?如何寻找理想伴侣?
2022.7.5DAY597
Interface test
Sword finger offer 38 Arrangement of strings [no description written]
ORM -- logical relation and & or; Sort operation, update record operation, delete record operation
基于gis三维可视化技术的智慧城市建设
01 use function to approximate cosine function (15 points)
Postman interface test VI