CSS字体大小动态间隔

Question

对于小屏幕(移动设备)，字体大小固定为 14px。在非常大的屏幕上，字体大小固定为 18px。所以它永远不能低于 14px，也永远不能高于 18px。媒体查询会处理这个问题。

然后我们有一个中间地带，我希望字体大小在 14px 和 18px 之间动态变化。为此，我使用 font-size: calc(.5vw + .85em); 效果不错，但不是很好。我不知道如何计算它从 14px 开始到 18px 在屏幕宽度 40rem (16 * 40) 和 65rem.

有什么想法吗？

.wrap {
  font-size: 16px;
}

p {
  font-size: calc(.5vw + .85em);
}

p:before {
  content: 'Desktop: ';
  opacity: .5;
}

@media screen and (min-width: 65rem) {
  p {
    font-size: 18px;
  }
  p:before {
    content: 'Desktop large: ';
    opacity: .5;
  }
}

@media screen and (max-width: 40rem) {
  p {
    font-size: 14px;
  }
  p:before {
    content: 'Mobile: ';
    opacity: .5;
  }
}

<div class="wrap">
  <p>
    text
  </p>
</div>

我这里也加了: https://jsfiddle.net/6ybkp7a1/6/

例子

当我的屏幕宽度为 40.1rem(略高于 40rem)时，我的字体大小应该为 14.1px(或任何它可能是)，就在 14px 之上。

Answer 1

你可以试试这个。它将从 14px 逐渐变为 18px。

它是如何工作的？

100vw 是我们的屏幕尺寸，因此它会在所需区域从 40rem 到 65rem 变化。减去 40rem，我们将得到 0rem 和 25rem 之间的变化。 25rem 等于 (16px * 25) = 400px。我们的变体现在是从 0 到 400px，如果我们除以 100 然后加上 14px，我们就有一个变体在 14px 和 18px 之间。

.wrap {
  font-size: 16px;
}

p {
  font-size: calc(14px + (100vw - 40rem)/100); /*or 14px + 1vw - 0.4rem */
}

p:before {
  content: 'Desktop: ';
  opacity: .5;
}

@media screen and (min-width: 65rem) {
  p {
    font-size: 18px;
  }
  p:before {
    content: 'Desktop large: ';
    opacity: .5;
  }
}

@media screen and (max-width: 40rem) {
  p {
    font-size: 14px;
  }
  p:before {
    content: 'Mobile: ';
    opacity: .5;
  }
}

<div class="wrap">
  <p>
    text
  </p>
</div>