位置: 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(苹果手表如何添加nfc门禁卡)

    苹果手表如何添加app(苹果手表如何添加nfc门禁卡)

  • 腾讯会员到期日哪里看(腾讯会员到期日是30号,包不包括30日那一天呢)

    腾讯会员到期日哪里看(腾讯会员到期日是30号,包不包括30日那一天呢)

  • 爱奇艺会员怎么一起用(爱奇艺会员怎么取消)

    爱奇艺会员怎么一起用(爱奇艺会员怎么取消)

  • onedrive有必要卸载吗(onedrive有没有必要用)

    onedrive有必要卸载吗(onedrive有没有必要用)

  • 拼多多能看到好友的购买记录吗(拼多多能看到好友的地址吗)

    拼多多能看到好友的购买记录吗(拼多多能看到好友的地址吗)

  • 外屏碎了一点不换有影响吗(外屏碎了但是不影响使用)

    外屏碎了一点不换有影响吗(外屏碎了但是不影响使用)

  • 华为p40有没有红外线遥控功能(华为p40有没有红外线)

    华为p40有没有红外线遥控功能(华为p40有没有红外线)

  • 腾讯会议打开摄像头所有人都能看见吗(腾讯会议打开摄像头人数上限)

    腾讯会议打开摄像头所有人都能看见吗(腾讯会议打开摄像头人数上限)

  • 小米10pro有微距吗(小米10pro有微距摄像头吗)

    小米10pro有微距吗(小米10pro有微距摄像头吗)

  • 路由器1900m是什么意思(路由器上的1900m和1200m是啥意思)

    路由器1900m是什么意思(路由器上的1900m和1200m是啥意思)

  • 人工分页符是硬分页符吗(人工分页符会随文章)

    人工分页符是硬分页符吗(人工分页符会随文章)

  • 华为手机录屏黑屏怎么办(华为手机录屏黑色但是有声音)

    华为手机录屏黑屏怎么办(华为手机录屏黑色但是有声音)

  • 魅族16s有智能遥控吗(魅族16s有遥控器功能吗)

    魅族16s有智能遥控吗(魅族16s有遥控器功能吗)

  • 荣耀20怎么查看运行内存(荣耀20怎么查看手机使用记录)

    荣耀20怎么查看运行内存(荣耀20怎么查看手机使用记录)

  • QQ匿名投票怎样才能看投票人(qq匿名投票在哪儿弄)

    QQ匿名投票怎样才能看投票人(qq匿名投票在哪儿弄)

  • 苹果暗夜模式怎么设置(苹果手机暗夜模式怎样切换)

    苹果暗夜模式怎么设置(苹果手机暗夜模式怎样切换)

  • 电信ipv6什么意思(电信ipv6是什么网络另外收钱吗?)

    电信ipv6什么意思(电信ipv6是什么网络另外收钱吗?)

  • 锁屏日历怎么显示农历(锁屏日历怎么显示农历vivo)

    锁屏日历怎么显示农历(锁屏日历怎么显示农历vivo)

  • 苹果12系统耗电吗(苹果系统耗电排行)

    苹果12系统耗电吗(苹果系统耗电排行)

  • 咻电是从哪里退押金(咻电怎么退押金)

    咻电是从哪里退押金(咻电怎么退押金)

  • 钉钉用户如何不参与打卡(钉钉如何不被钉)

    钉钉用户如何不参与打卡(钉钉如何不被钉)

  • oppo便签在哪里(oppo便签在哪里恢复)

    oppo便签在哪里(oppo便签在哪里恢复)

  • 修改hosts文件的权限以自由修改该文件(修改hosts文件的软件)

    修改hosts文件的权限以自由修改该文件(修改hosts文件的软件)

  • 莫尔国家公园中的天蚕蛾,加纳拉拉班加 (© Robert Thompson/Minden Pictures)(莫尔道嘎湿地公园)

    莫尔国家公园中的天蚕蛾,加纳拉拉班加 (© Robert Thompson/Minden Pictures)(莫尔道嘎湿地公园)

  • python方差检验是什么意思(python方差齐性检验)

    python方差检验是什么意思(python方差齐性检验)

  • 2020年国税申报截止到什么时候
  • 实收资本如何网上转账
  • 现金流管理模式
  • 应计入企业存货成本有哪些
  • 起征点与免征额的区别
  • 场外货币基金赎回利息
  • 预付账款转出分录
  • 运保佣是什么
  • 公司新售楼总部房产税怎样算?
  • 外购技术服务费包括哪些
  • 销售公司车辆如何填报销项税
  • 轿车计提折旧
  • 办公室租赁合同需要交那些税?
  • 显示发票离线,应当如何处理
  • 广告制作税收编码怎么填
  • 最优五种个人捐赠方式税务比较?
  • 应收票据背书转让以取得所需物资
  • 某市财政收到林业基金收入分录
  • 打样费入什么科目
  • linux系统中怎么创建目录
  • 一年以上预收账款
  • 长期借款利息和短期借款利息都应计入财务费用
  • 什么时候使用多进程
  • vue3自定义指令
  • linux系统设置屏幕常亮
  • 前端几种下载文件
  • 已领待用物资
  • 增值税专用发票丢了怎么补救
  • html里面有什么
  • 常用的css样式有哪些
  • 分页limit参数
  • 安装traceroute命令
  • 开公司车出差违章了谁负责
  • 淘宝运费险费用很高
  • mysql的查询缓存与redis的区别
  • mongodb win7
  • phpcms任意文件上传
  • 承租方承担税费
  • 商场账务
  • 公司个人借款如何做账
  • 纳税申报表上的销售额是不含税的吗
  • 增值税发票价税合计不能超过多少
  • sqlserver2008数据迁移
  • 印花税减免计入什么科目
  • 常见的防暑降温药有
  • 刚购入的固定资产已使用年限怎么填
  • 增值税明细账怎么结账
  • 固定资产是否可调剂
  • 3%减按1%征收增值税政策2022年
  • 包装物范围
  • 一般纳税人出现以下哪些情况时,其进项税额不得抵扣( )
  • window10怎么设置蓝牙
  • windows10怎么扩大内存
  • win10如何添加输入法
  • Xp系统的桌面文件在哪里
  • bios界面uefi
  • GrooveMonitor.exe是什么进程?GrooveMonitor.exe可以禁用卸载吗?
  • linux c命令
  • winpsd.exe - winpsd是什么进程
  • Win10 Mobile/PC build 10586.589曝光:老机型有份
  • window10窗口操作
  • winxp系统怎么设置开机密码
  • Win RT 8.1 Update 3怎么提前更新安装使用?
  • linux shell alias
  • Win10 Build 10586.494稳定版更新修复内容以及KB3172985补丁下载地址
  • windows8 defender
  • 不经过回收站直接删除文件的操作是
  • win8怎么设置桌面背景
  • win10不能玩qq堂没反应
  • jquery鼠标点击
  • windows批量添加文件后缀
  • 动态规划之矩阵连乘
  • JavaScript驾驭网页-获取网页元素
  • 飞机大战剧情102
  • nodemodules拷贝到其他目录
  • js设置rem
  • js对象类
  • 西安市经开区管委会官网
  • 餐饮业如何缴纳增值税
  • 盈利性组织与非盈利性组织公共关系不同之处
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设