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

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

越来越多的前端项目现在需要这个操作,其操作的原因很简单,你的项目可能跑在小尺寸分辨率的电脑上,也有可能在大尺寸的会议平板上,更有甚者是在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.

cebb88da090448cd8ebd5ef5f582e1ce.png

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

0565af5516184b809296b461149a9548.png

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

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

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


a72e920205a043efbb61c2b771f8fe84.png

我们的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 在短时间内只执行一次的效果。再次尝试后发现,页面功能一切正常。

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

目录
相关文章
|
1月前
|
前端开发
web前端开发-----CSS样式设置
web前端开发-----CSS样式设置
29 0
|
3月前
|
缓存 前端开发 JavaScript
如何优化前端页面性能
前端性能优化是网站开发中非常重要的一部分,它直接关系到用户体验和网站的流量以及排名。本文将介绍一些优化前端页面性能的方法,包括减少HTTP请求、压缩代码、使用CDN等。
|
4月前
|
移动开发 前端开发 JavaScript
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
|
2月前
|
存储 前端开发 JavaScript
【JavaEE初阶】 博客系统项目--前端页面设计实现
【JavaEE初阶】 博客系统项目--前端页面设计实现
|
6月前
|
缓存 前端开发 JavaScript
【前端用法】jquery获取当前页面的URL信息
【前端用法】jquery获取当前页面的URL信息
51 0
|
6月前
|
前端开发 安全 JavaScript
关于前端页面测试和抵御 clickjacking attack 的一些方法
关于前端页面测试和抵御 clickjacking attack 的一些方法
51 0
|
2月前
|
存储 前端开发 安全
无限连接:前端跨页面通信的实现与应用
在前端开发中,有时我们需要在不同的页面之间进行数据传递和交互。这种场景下,前端跨页面通信就显得尤为重要。前端跨页面通信是指在不同的页面之间传递数据、发送消息以及实现页面间的交互操作。本文将详细介绍前端跨页面通信的属性、应用场景以及实现方法,并提供一些代码示例和引用资料,帮助读者深入了解并应用这一重要的技术。
|
3月前
|
移动开发 监控 前端开发
HTML5与CSS3教学:美化员工行为监控软件前端页面的代码技巧
在当今信息时代,企业对员工行为的监控成为了一项必不可少的工作。而员工行为监控软件作为一种高效的管理工具,其前端页面的设计和美化显得尤为重要。本文将介绍如何利用HTML5和CSS3技术,优雅地美化员工行为监控软件前端页面的代码技巧。
210 0
|
4月前
|
JSON 前端开发 Java
(简易详细)spring boot 使用拦截器 实现拦截前端请求并返回json到前端页面
(简易详细)spring boot 使用拦截器 实现拦截前端请求并返回json到前端页面
99 0
|
4月前
|
前端开发
前端知识笔记(十八)———页面首次滑动不可返回
前端知识笔记(十八)———页面首次滑动不可返回
19 0