CSS字体大小在间隔之间动态变化

Question

对于小屏幕（移动），字体大小固定为14px。在真正的大屏幕上，字体大小固定为18px。所以它永远不会低于14px，也永远不会高于18px。媒体查询会处理这个问题。

然后我们有一个中间立场，我希望字体大小在14px 和18px 之间是动态的。为此，我使用font-size: calc(.5vw + .85em);，它工作正常，但不是很好。我不知道如何计算它从14px 开始并在屏幕宽度40rem (16 * 40) 和65rem 之间的18px 结束。

有什么想法吗？

.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>

Answer 2

为min-width: 40rem 设置另一个媒体查询以及您拥有的其他媒体查询。这应该注意您添加的这两个屏幕尺寸之间的屏幕尺寸。

这是工作示例(JSFiddle)：

.wrap {
  font-size: 16px;
}

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

@media screen and (min-width: 40rem) {
  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;
  }
}

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