问CSS响应字体大小

EN

您可以使用viewport值而不是ems、pxs或pts：

1 1vw =视口宽度的1% 1 1vh =视口高度的1% 1 1vmin =1 1vw或1 1vh，以较小者为准 1 1vmax =1 1vw或1 1vh，以较大者为准

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

来自CSS-Tricks：http://css-tricks.com/viewport-sized-typography/

我一直在玩弄克服这个问题的方法，并且相信我找到了一个解决办法：

如果您可以为Internet 9(及更高版本)和所有其他支持CSS calc()、rem单元和vmin单元的现代浏览器编写应用程序。您可以使用它来实现可伸缩的文本，而无需媒体查询：

body {
  font-size: calc(0.75em + 1vmin);
}

在这里，它在行动：http://codepen.io/csuwldcat/pen/qOqVNO

h1{
  font-size : clamp(2rem, 10vw, 5rem);
}

这里，clamp有3个参数。

• 第一个是最小允许的字体大小.
• 第三种是允许的最大字体大小。
• 第二个参数是您希望始终拥有的字体大小。它的单位必须是相对的(vw，vh，ch)，而不是绝对的(即不px，mm，pt)。相对单元将使其改变其大小w.r.t变化的屏幕大小。

考虑一个示例：考虑有一个大的字体图标，您想要动态地调整大小(响应图标)

fa-random-icon{
   font-size: clamp( 15rem, 80vw, 80vh)   
}

• 这里，80 is是首选的字体大小。
• 15 rem是最小字体大小(下限)。
• 80vh是最大字体大小(上限)。

即

• 如果在一个特定的移动屏幕大小，如果80vw <15 then，那么字体大小是15 then。
• 如果屏幕太宽，那么如果80 if >80 if，则字体大小为80 if。

人们提出的上述方法，其结果总是有些不确定。就像我们只使用vw时，字体大小有时太大或太小(没有限制)。可以使用media查询，但必须将字体大小与至少3个媒体查询绑定在一起。