移动端字体根据窗口宽度变化

写一个js

复制代码
(function() {
'use strict';

const mWidth = 750;
// 减少dom操作
const doc = document.documentElement;

function resize(){
// 获取dom文档宽
const deviceWidth= window.innerWidth || doc.getBoundingClientRect().width || doc.clientWidth;
// 动态改变html的font-size,以750为例
if(deviceWidth > mWidth) {
doc.style.fontSize = 100 + 'px'
} else {
doc.style.fontSize = (deviceWidth / 7.5) + 'px'
}
}
// 检测屏幕尺寸变化同步font-size,如横竖屏切换时触发
window.addEventListener('resize', () => {
resize()
}, false)
// 页面初始化时触发
resize()

})();
复制代码

 

posted @   study_php_java_C++  阅读(21)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
历史上的今天:
2020-06-23 Deprecated: __autoload() is deprecated, use spl_autoload_register()
2020-06-23 linux停止nginx服务 未成功
2019-06-23 PHP获取当前网址路径
点击右上角即可分享
微信分享提示