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

Posted 赵小左

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端设置页面字体尺寸跟随屏幕大小而进行变化相关的知识,希望对你有一定的参考价值。

越来越多的前端项目现在需要这个操作,其操作的原因很简单,你的项目可能跑在小尺寸分辨率的电脑上,也有可能在大尺寸的会议平板上,更有甚者是在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 在短时间内只执行一次的效果。再次尝试后发现,页面功能一切正常。

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

h5移动端字体大小怎么随着页面大小变化而变化

手机响应式布局,是获取屏幕尺寸,在某个区间用一种css,另个区间用另一种css。需要用@media写多份css的。无法做到真正的随屏幕变化而变化。

而<meta name="viewport" content="width=device-width" />的用法是随着屏幕的大小,自动把页面自适应到屏幕的大小。这个是管用的。

em是字体的宽度,也就是一个字体宽12px,那么em=12px;字体为15px,em=15px;一般用来动态控制字体外的区块大小去适应字体,而不是用来设置字体的大小的。例如:

<p style="width: 12em;">
<!-- / 无论这里设置的字体多大,宽度只会容纳12个字 / -->
</p>

如果<meta name="viewport" content="width=device-width" />没效果,建议你用图片贴出来,看看你想要的具体效果是什么。
参考技术A

手机响应式布局,是获取屏幕尺寸,在某个区间用一种css,另个区间用另一种css。需要用@media写多份css的。无法做到真正的随屏幕变化而变化。

那么如何解决横竖屏时页面内容字体大小呢?

这里就要用到 css 的一个属性值了:text-size-adjust : none

body     -webkit-text-size-adjust : 100% ;     -moz-text-size-adjust : 100% ;     -ms-text-size-adjust : 100% ;  text-size-adjust : 100%; 

设置属性:text-size-adjust : 100%; 这个属性值可以设置移动设备上的横竖屏,字体变化的问题,但必须设置100%。不能设置为none,不然,webkit浏览器无法人为放大文字大小,严重影响可用性。

设置这个属性哪里需要的地方就在哪里设置,如果全文都需要,那就在body里面设置属性值。

以上是关于前端设置页面字体尺寸跟随屏幕大小而进行变化的主要内容,如果未能解决你的问题,请参考以下文章

WEB前端怎么布局?

css响应式问题,图片随页面宽度等比例缩小该怎么设置

前端移动端rem页面怎么写js代码怎么写

Android: 设置 app 字体大小不跟随系统字体调整而变化

Qt的pointSize和pixelSize,qt字体大小自适应

前端-根据页面大小动态计算字体大小