调整优雅的文本大小调整解决方案的性能，实现流畅/响应式设计

Tweaking performance of elegant solution to text resize for fluid/responsive designs?

本文关键字：调整 实现 响应 性能 文本 解决方案      更新时间：2023-09-26

我发现以下JS解决方案非常优雅，可以根据视口大小调整文本大小：

https://stackoverflow.com/a/10295733/1318135

onresize=onload=function(){document.body.style.fontSize=window.innerWidth+"px"}

然而，有两个问题：

  1. 它依赖于正在调整大小的视口。我也想在页面第一次加载时触发它，但我是JS的新手。

  2. 我的页面完全使用em值进行编码；这使用px。我如何使用它来调整仅限默认em大小，然后它将自动滴到页面上的其他元素？

http://jsfiddle.net/hFNc7/

谢谢！

  1. 查看其他答案（或放入http://jsfiddle.net/cjzEK/1/在页面底部）

  2. em本身并不是一个尺寸。这是一个不同的百分比。em为您工作的唯一方法是，浏览器中设置了1个基本字体大小（或者可能还有一个重置样式表）。浏览器中字体的基本大小通常是16px。因此，这个解决方案所做的是通过将基本大小添加到正文中来更改基本大小（将其添加到html中可能会更好）。

例如，没有进行任何重置的CCD_ 1将是16px。1.5em将是24px。

您需要在body的load事件中运行该代码。最简单的方法是通过其onload属性直接设置：

<body onload="var f = function () { document.body.style.fontSize = 0.2 * window.innerWidth + 'px'; }; window.onresize = f; f();">

它的作用：

  1. 创建一个能够动态设置字体大小的函数
  2. 将函数设置为resize事件侦听器
  3. 立即执行该功能

附言：有更优雅的方式来写这篇文章，但由于你是新的，最好从一个更容易的符号开始。

相关文章：