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

这里clamp有三个参数。

第一个是允许的最小字体大小。 第三个是允许的最大字体大小。 第二个参数是您希望始终具有的font-size。它的单位必须是相对的(vw, vh, ch)，而不是绝对的(i。E不是px mm pt)相对单元将使它改变其大小W.R.T变化的屏幕尺寸。

举个例子: 假设有一个很大的fontawesome图标，您想动态调整它的大小(响应式图标)

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

这里80vw是首选的字体大小。 15雷姆是最小字体大小(下界)。 80vh是最大字体大小(上限)。

i.e.

如果在特定的移动屏幕尺寸中，如果80vw < 15rem，则字体大小为15rem。 如果屏幕太宽，那么如果80vw > 80vh，那么字体大小是80vh。

人们提出的上述方法往往效果不确定。就像我们只使用vw时，字体大小有时可能太大或太小(无界)。

@media查询可以使用，但你必须使用至少3个媒体查询，使字体大小响应

如果你正在使用一个构建工具，那么试试Rucksack。

否则，你可以使用CSS变量(自定义属性)来轻松控制最小和最大字体大小，就像这样(演示):

* {
  /* Calculation */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}

h1 {
  --max-size: 50;
  --min-size: 25;
  font-size: var(--responsive);
}

h2 {
  --max-size: 40;
  --min-size: 20;
  font-size: var(--responsive);
}

有几种方法可以实现这一点。

使用媒体查询，但它要求几个断点的字体大小:

body
{
    font-size: 22px;
}

h1
{
    font-size: 44px;
}

@media (min-width: 768)
{
    body
    {
        font-size: 17px;
    }
    h1
    {
        font-size: 24px;
    }
}

使用%或em的尺寸。只要改变基本字体大小，一切都会改变。与前一个不同的是，你可以只改变主体字体，而不是每次都是h1，或者让基本字体大小是设备的默认值，其余都在em中:

“Ems” (em): The “em” is a scalable unit. An em is equal to the current font-size, for instance, if the font-size of the document is 12 pt, 1 em is equal to 12 pt. Ems are scalable in nature, so 2 em would equal 24 pt, .5 em would equal 6 pt, etc.. Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12 pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

看到kyleschaeffer.com/..。

CSS 3支持相对于视图端口的新维度。但这在Android上行不通:

3.2vw =视口宽度的3.2% 3.2vh =视口高度的3.2% 3.2vmin =小于3.2vw或3.2vh 3.2vmax =大于3.2vw或3.2vh 身体 ｛ 字体大小:3.2大众; ｝

参见CSS-Tricks…再看看Can I Use…

在调整浏览器窗口大小时，字体大小不会像这样响应。相反，它们会对浏览器的缩放/类型大小设置做出响应，比如在浏览器中同时按下键盘上的Ctrl和+。

媒体查询

你必须考虑使用媒体查询来减少字体大小在特定的时间间隔，它开始破坏你的设计和创建滚动条。

例如，试着在你的CSS底部添加这个，在你的设计开始中断的地方改变320像素的宽度:

@media only screen and (max-width: 320px) {

   body { 
      font-size: 2em; 
   }

}

视口百分比长度

你也可以使用视口百分比长度，如vw, vh, vmin和vmax。官方W3C文档声明:

viewport-percentage长度相对于初始包含块的大小。当初始包含块的高度或宽度发生变化时，它们将相应地缩放。

同样，从同一W3C文档中，每个单独的单元可以定义如下:

vw单位-等于初始包含块宽度的1%。 vh单位-等于初始包含块高度的1%。 vmin单位-等于vw或vh中较小者。 vmax单位-等于vw或vh中较大的一个。

它们的使用方式与其他CSS值完全相同:

.text {
  font-size: 3vw;
}

.other-text {
  font-size: 5vh;
}

从这里可以看出，兼容性相对较好。但是，某些版本的ie浏览器和Edge浏览器不支持vmax。此外，iOS 6和7的vh单位也有问题，这在iOS 8中得到了修复。

在得出许多结论后，我最终得出了以下结论:

@media only screen and (max-width: 730px) {

    h2 {
        font-size: 4.3vw;
    }
}

在实际的原始Sass(不是scss)中，你可以使用下面的mixins来自动设置段落和所有标题的字体大小。

我喜欢它，因为它更紧凑。打字也更快。除此之外，它提供了相同的功能。无论如何，如果你仍然想坚持新的语法- scss，那么请随意将我的Sass内容转换为scss: [将sass转换为SCSS]

下面我给你四个Sass mixins。您必须根据需要调整它们的设置。

=font-h1p-style-generator-manual() // You don’t need to use this one. Those are only styles to make it pretty.
=media-query-base-font-size-change-generator-manual() // This mixin sets the base body size that will be used by the h1-h6 tags to recalculate their size in a media query.
=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6) // Here you will set the size of h1 and size jumps between h tags
=config-and-run-font-generator() // This one only calls the other ones

在你完成设置后，只需对一个mixin进行调用，即:+config-and-run-font-generator()。有关更多信息，请参阅下面的代码和注释。

我猜你可以像处理标题标签一样自动地为媒体查询做这件事，但我们都使用不同的媒体查询，所以它不适合每个人。我使用移动优先的设计方法，所以这就是我如何做到这一点。请随意复制并使用此代码。

复制并粘贴这些mixins到你的文件中:

=font-h1p-style-generator-manual()
  body
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif // google fonts
    font-size: 100%
    line-height: 1.3em
  %headers
    line-height: 1em
    font-weight: 700
  p
    line-height: 1.3em
    font-weight: 300
  @for $i from 1 through 6
    h#{$i}
      @extend %headers


=media-query-base-font-size-change-generator-manual()
  body
    font-size: 1.2em
  @media screen and (min-width: 680px)
    body
      font-size: 1.4em
  @media screen and (min-width: 1224px)
    body
      font-size: 1.6em
  @media screen and (min-width: 1400px)
    body
      font-size: 1.8em

=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6)
  $h1-fs: $h1-fs // Set first header element to this size
  $h1-step-down: $h1-step-down // Decrement each time by 0.3
  $p-same-as-hx: $p-same-as-hx // Set p font-sieze same as h(6)
  $h1-fs: $h1-fs + $h1-step-down // Looping correction
  @for $i from 1 through 6
    h#{$i}
      font-size: $h1-fs - ($h1-step-down * $i)
    @if $i == $p-same-as-hx
      p
        font-size: $h1-fs - ($h1-step-down * $i)

// RUN ONLY THIS MIXIN. IT WILL TRIGGER THE REST
=config-and-run-font-generator()
  +font-h1p-style-generator-manual() // Just a place holder for our font style
  +media-query-base-font-size-change-generator-manual() // Just a placeholder for our media query font size
  +h1p-font-size-generator-auto($h1-fs: 2em, $h1-step-down: 0.2, $p-same-as-hx: 5) // Set all parameters here

根据您的需要配置所有的mixin -玩它!:)然后在你实际的sass代码的顶部调用它:

+config-and-run-font-generator()

这会产生这样的输出。您可以自定义参数以生成不同的结果集。但是，因为我们都使用不同的媒体查询，有些mixin必须手动编辑(样式和媒体)。

生成CSS:

body {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 100%;
  line-height: 1.3em;
  word-wrap: break-word; }

h1, h2, h3, h4, h5, h6 {
  line-height: 1em;
  font-weight: 700; }

p {
  line-height: 1.3em;
  font-weight: 300; }

body {
  font-size: 1.2em; }

@media screen and (min-width: 680px) {
  body {
    font-size: 1.4em; } }
@media screen and (min-width: 1224px) {
  body {
    font-size: 1.6em; } }
@media screen and (min-width: 1400px) {
  body {
    font-size: 1.8em; } }
h1 {
  font-size: 2em; }

h2 {
  font-size: 1.8em; }

h3 {
  font-size: 1.6em; }

h4 {
  font-size: 1.4em; }

h5 {
  font-size: 1.2em; }

p {
  font-size: 1.2em; }

h6 {
  font-size: 1em;

}