Javascript 如何进行重复设计，使H2在一行DIV中获得最大字体大小？

如何制作标题

H2

，以适应

DIV

的当前宽度

---

我希望

H2

获得最大字体大小，显示其完整上下文（不使用溢出来剪切或隐藏其内容），同时不打断

DIV中的第二行。有几个JavaScript插件可以处理这个问题，这可能会为您提供最好的服务

一个简单但有效的CSS唯一方法是使用视口宽度（
vw
）作为字体大小的值。下面是一个结合使用
空白：nowrap
的示例：

HTML:

注意——这种方式无论如何都不是完美的——我建议使用像FitText:，它非常强大

有关视口单位的详细信息：
Js方式：

您可以使用基于Javascript的插件，如FitTextJs。这个插件允许你有标题，可以根据当前的设备宽度调整大小

CSS方式：

您可以使用vw单位提供字体大小。这将根据当前视口大小缩放字体大小

例如，1vw将指示浏览器使用当前视口宽度1%的字体大小

但在实现之前，请检查您的目标浏览器是否支持此单元

自定义实现：

我用下面的方法来设计流体网站，它应该在所有可能的屏幕分辨率中对齐并显示相同

如果320像素处的字体大小为12像素，则移动字体倍增系数为

320px的字体大小为12px

那么480px的字体大小应该是多少

计算结果将是：

X = ( 12 * 480)  / 320;

动态计算字体大小后，可以将字体大小设置为body标记，并以%为单位设置依赖元素的字体大小

e、 g

这个方法实现起来很有趣

但是，在新计算的字体大小应用于窗口大小调整或方向更改之前，会有一点延迟，
vw
方法不适用于我的情况。它基于视口大小，但我需要基于
DIV
宽度，因为它是一种响应性设计，我的
DIV
在不同的情况下可以大也可以小。FitText是否能够处理
H2
被封装在响应的
DIV
中的情况？@KDX-hmm，当然H2本身的大小是可能的，但是如果没有JS，其中的文本会很棘手。Fittext可以处理大多数场景，我从未遇到过它不起作用的情况，但您可能需要进行实验，因为每种情况都可能不同。从你的描述来看，我认为它会很好地工作。。。
h2 {
  white-space: nowrap;
  font-size: 3vw;
}

X = ( 12 * 480)  / 320;

h2 { font-size:110%;}