间隔之间动态更改CSS字体大小

Question

对于小尺寸（移动设备），字体大小固定为14px。在非常大的屏幕上，字体大小固定为18px。因此它永远不能低于14px，也永远不能高于18px。媒体查询可以解决这个问题。

然后我们有一个中间立场，我希望字体大小在14px和18px之间是动态的。为此，我使用font-size: calc(.5vw + .85em);可以正常工作，但效果不佳。我不知道如何计算从14px开始到屏幕宽度18px（16 * 40）和40rem之间的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>

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>