位置: IT常识 - 正文

前端设置页面字体尺寸跟随屏幕大小而进行变化(前端页面默认字体)

编辑:rootadmin
前端设置页面字体尺寸跟随屏幕大小而进行变化

推荐整理分享前端设置页面字体尺寸跟随屏幕大小而进行变化(前端页面默认字体),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端设置页面字体大小,前端设置字体大小,前端设置字体,前端字体怎么设置?,web前端页面设置字体大小,前端设置页面字体大小,前端设置页面字体大小,前端页面默认字体,内容如对您有帮助,希望把文章链接给更多的朋友!

越来越多的前端项目现在需要这个操作,其操作的原因很简单,你的项目可能跑在小尺寸分辨率的电脑上,也有可能在大尺寸的会议平板上,更有甚者是在LED上。那么如何让你的项目根据屏幕分辨率的大小而自动变化,修改页面展示字体以及调整尺寸呢?

按照我们所需功能,我们还是先来对一下流程及需求。

第一:我们要求页面一打开就获取屏幕大小,通过计算设置尺寸及字体大小。

第二:我们当页面分辨率修改后(拖动、或者分辨率转换)我们也需要设置其尺寸和大小。

鉴于以上两种需求。我们可以提炼出。

1. 我们需要一个监测屏幕分辨率的方法。

2. 我们的页面尺寸需要使用rem来进行编写。

3. 我们需要根据屏幕情况来动态设置font-size

下来我们来编写代码:

我们新建一个文件index.js  并将这个文件引入到 index.html 中

在这个index.js中我们先放置一个空的自执行函数

// 项目根目录新建文件 util.js放置一个自执行函数(() => { // 内容})()

然后在这个自执行函数里我们再写一个函数方法,这个方法来动态设置字体大小

(() => { // 设置字体大小 function calcFontSize() { const zoom = window.screen.width / 1920; const size = zoom * 16; document.documentElement.style.fontSize = size + 'px'; console.log('设置字体大小', size); }})()

上述代码中,我们首先获取屏幕的大小,以1920 为主。1920分辨率下默认font-size设置为16px。至于为什么要设置 font-size。那是因为rem的缘故,此处不了解的可以自行百度。

设置完设置字体代码后,我们完成了上述需求的第三个,则还需要第一个跟第二个。

前端设置页面字体尺寸跟随屏幕大小而进行变化(前端页面默认字体)

那下来我们再写一个方法用来监测电脑分辨率。window.onload

(() => { // 设置字体大小 function calcFontSize() { const zoom = window.screen.width / 1920; const size = zoom * 16; document.documentElement.style.fontSize = size + 'px'; console.log('设置字体大小', size); } window.onload = () => { }})()

上述中window.onload 方法的意思是用于在网页加载完毕后立刻执行的操作,即当 HTML 文档加载完毕后,立刻执行某个方法。也就是页面初始化的时候去加载。在这里面我们需要昨个操作,也就是页面一加载完的时候,我们需要去给window的 onresize 绑定一个方法。

window.onload = () => { console.log("页面加载完成") let resize_timer = null; const resize = () => { } window.onresize = resize; }

window.onresize的意思是,当监测到屏幕分辨率变的时候,所以我们需要一个操作就是,页面一加载完成,我们给window.onresize 绑定一个方法。这个方法只绑定一次,而不需要每次都去绑定。这样的话,当每次屏幕分辨率改变的时候,都会去执行 resize 这个方法。

那么这个方法里我们应该些什么呢?那就是调用我们第一步做的 calcFontSize 这个方法,修改整个document的font-size 属性。

window.onload = () => { console.log("页面加载完成") let resize_timer = null; const resize = () => { calcFontSize(); } window.onresize = resize; }

目前的完整代码如下:

(() => { // 设置字体大小 function calcFontSize() { const zoom = window.screen.width / 1920; const size = zoom * 16; document.documentElement.style.fontSize = size + 'px'; console.log('设置字体大小', size); } calcFontSize(); window.onload = () => { console.log("页面加载完成") const resize = () => { calcFontSize(); } window.onresize = resize; }})()

我们去页面上查看,会发现当我们拖动文档流的时候,字体并不会重新设置。如下我拖了两次都没有触发修改。同样是12.8.

只有当我们改完电脑屏幕分辨率后,它才会重新设置。就比如,我从笔记本的屏幕拖动项目到外接显示器上。它就会响应重新设置 font-size。如下:

 当我拖到外接显示器后,它自动的出发了 calcFontSize 方法重新配置了字体大小。

 到这里我们的主功能就设置结束了。

但是我们发现每次触发resize后。

我们的resize被执行了两次?这是怎么回事呢?

这是因为,每次window.onresize  都会去执行 resize,而在屏幕分辨率发生变化的时候,window.onresize 和浏览器的自身实现有关系.不同的浏览器和操作系统实现可能不一样,目前谷歌是执行了两次,有是时候是一次。所以导致页面变化有点闪动。那怎么办呢?

那就是去增加settimeout 来达到短时间只触发一次的效果。

(() => { // 设置字体大小 function calcFontSize() { const zoom = window.screen.width / 1920; const size = zoom * 16; document.documentElement.style.fontSize = size + 'px'; console.log('设置字体大小', size); } window.onload = () => { console.log("页面加载完成") let resize_timer = null; const resize = () => { if (resize_timer) { clearTimeout(resize_timer); } resize_timer = setTimeout(() => { resize_timer = null; calcFontSize(); }, 500); } window.onresize = resize; }})()

上述代码中,我们利用防抖的方式来使用setTimeout 达到了让 resize 在短时间内只执行一次的效果。再次尝试后发现,页面功能一切正常。

页面组件样式大小也达到了我们的要求。

本文链接地址:https://www.jiuchutong.com/zhishi/285064.html 转载请保留说明!

上一篇:SU-03T语音模块的使用(小智语音控制LED灯)(语音模块作用)

下一篇:迷迭香怎么养,阳台如何养殖迷迭香(图文)(迷迭香怎么养殖方法)

  • 支付宝怎么买电影票(支付宝怎么买电话卡)

    支付宝怎么买电影票(支付宝怎么买电话卡)

  • 网易云怎么换照片墙(网易云怎么换照片背景图)

    网易云怎么换照片墙(网易云怎么换照片背景图)

  • app更新只显示打开(app需要更新却是打开)

    app更新只显示打开(app需要更新却是打开)

  • 苹果11锁屏密码突然不对(苹果11锁屏密码找回教程)

    苹果11锁屏密码突然不对(苹果11锁屏密码找回教程)

  • 腾讯会议怎么共享视频(腾讯会议怎么共享屏幕看电影)

    腾讯会议怎么共享视频(腾讯会议怎么共享屏幕看电影)

  • word所认为的字符不包括汉字嘛(字word是指)

    word所认为的字符不包括汉字嘛(字word是指)

  • 微信被拉入黑名单,还可以发信息给对方吗(微信被拉入黑名单还能添加好友吗)

    微信被拉入黑名单,还可以发信息给对方吗(微信被拉入黑名单还能添加好友吗)

  • 虎牙注销账号多久生效(虎牙注销帐号要多久)

    虎牙注销账号多久生效(虎牙注销帐号要多久)

  • 华为手机左上角出现一个眼睛是什么(华为手机左上角出现的各种标识)

    华为手机左上角出现一个眼睛是什么(华为手机左上角出现的各种标识)

  • 拼多多的免拼卡在哪里找到(拼多多的免拼卡在哪里看)

    拼多多的免拼卡在哪里找到(拼多多的免拼卡在哪里看)

  • 下载好的电视剧开着数据不费流量吧(下载好的电视剧还要流量吗)

    下载好的电视剧开着数据不费流量吧(下载好的电视剧还要流量吗)

  • 苹果11是否是全网通(苹果11是全面屏么)

    苹果11是否是全网通(苹果11是全面屏么)

  • 苹果手机左边第一个按键是什么(苹果手机左边第一个按键在哪里设置)

    苹果手机左边第一个按键是什么(苹果手机左边第一个按键在哪里设置)

  • 安卓手机强制恢复出厂(安卓手机强制恢复出厂设置要密码)

    安卓手机强制恢复出厂(安卓手机强制恢复出厂设置要密码)

  • 来电语音提示是什么(手机电话语音来电提示)

    来电语音提示是什么(手机电话语音来电提示)

  • word里怎么增加目录(Word里怎么增加空白页)

    word里怎么增加目录(Word里怎么增加空白页)

  • 微信发朋友圈必须发视频吗(微信一键转发朋友圈)

    微信发朋友圈必须发视频吗(微信一键转发朋友圈)

  • 小米防误触模式在哪里(小米防误触模式在哪里关闭)

    小米防误触模式在哪里(小米防误触模式在哪里关闭)

  • 华为手机有隔空投送吗(华为手机有隔空手势吗)

    华为手机有隔空投送吗(华为手机有隔空手势吗)

  • 小米最近删除照片在哪(小米手机相册最近删除的照片)

    小米最近删除照片在哪(小米手机相册最近删除的照片)

  • 同一个wifi别人能用我不能用呢(同一个wifi别人网速快我网速慢)

    同一个wifi别人能用我不能用呢(同一个wifi别人网速快我网速慢)

  • 手机照片压缩怎么弄(手机照片压缩怎么恢复)

    手机照片压缩怎么弄(手机照片压缩怎么恢复)

  • win10时间显示到秒怎么设置(Win10时间显示到秒)

    win10时间显示到秒怎么设置(Win10时间显示到秒)

  • VSCode 入门操作大全 + 实用插件推荐【零基础专属详细教程】(vscode入门视频)

    VSCode 入门操作大全 + 实用插件推荐【零基础专属详细教程】(vscode入门视频)

  • 中型企业的标准是什么 划分标准
  • 企业所得税相关分录
  • 购买厂房需要交土地使用税吗
  • 利息收入纳税义务时点
  • 劳务报酬需要补税吗
  • 小规模税控设备维护费怎么填申报表格
  • 单位交的社保明年能退吗
  • 劳务派遣小规模纳税人税率是多少
  • 买二手房为什么要交个人所得税
  • 运输业应列入
  • 贸易公司购买汽车的发票可以用抵公司的税吗
  • 通用机打发票上面为什么不体现税率
  • 维护费开的普票能全额抵扣吗?
  • 私车公用税务处理办法
  • 建筑业商业保险受益人可以是公司吗
  • 开票资料电话可以查到吗
  • 会计人员应掌握的知识
  • 公司按月工资怎么算
  • 房地产企业综合税率是多少
  • 收到打款认证会计分录
  • 其他税收收入包括
  • 公司注销时债权人未申报债权
  • 工会固定资金是什么
  • 教你从脸上看出风水
  • 关联业务往来年度报告表
  • 不用itunes怎么下载软件
  • 存货损失进项税
  • 开发票原则是收款之后才能开具吗
  • php数组函数有哪些
  • phpmemcached使用
  • 赠送礼品进项税需要转出吗
  • 北极光下的众神图片
  • 现代信号处理张贤达
  • vue 路由
  • Chat GPT5如果问世会对世界产生什么影响?以及未来chat gpt 5会取代什么类型的工作。
  • 银行流水要去哪里打
  • 在建工程明细科目有土地使用权摊销吗
  • 冲暂估会计分录
  • 收到个人所得税汇算清缴短信
  • 织梦安装完要删除哪个文件
  • 多收了钱怎么记账
  • 工资预提和计提的区别
  • 金税盘清卡失败增值税未申报或未比对
  • 应收账款属于供应商还是客户
  • 餐饮发票要钱吗
  • 取得交易性金融资产的交易费用
  • 应收账款期初余额在借方还是贷方
  • 年度利润总额的英文缩写
  • 营改增政策汇总
  • 已入库的原材料会计分录
  • 苗木免税吗
  • 旅客运送的一般规定
  • 差旅费住宿专票能否抵扣
  • 租赁财产的残值处理
  • 工业企业产值如何确定
  • 应收账款折率
  • 银行信贷人员岗位职责
  • mssql CASE,GROUP BY用法
  • mysql设置唯一值
  • mysql更新表中的数据
  • aesm_service.exe是什么
  • window系统怎么更新版本
  • 如何将用户加入某个组
  • 安卓单机手游下载
  • 硬盘装pe怎么启动
  • cgi linux
  • w8系统怎么用
  • centos支持中文
  • ftpr
  • combobox jsp
  • dos批处理教程
  • node搭建项目
  • 手机端apk反编译工具_android反编译工具
  • 最简单的十个菜
  • 安卓怎样从旧手机把联系人导入新手机
  • 广东省电子税务局电话
  • 税控盘托管给百旺的弊端
  • 云南国税局官网网站
  • 扣缴个人所得税客户端操作流程
  • 销售折让怎么开票
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设