使用 CSS 映射移动设备的字体大小范围

Question

>问题：

• 较大的字体在桌面上看起来不错，但在移动设备上
太大
• 字体大小是用户从富文本编辑器定义的，因此很难通过单个媒体查询涵盖每种情况
• 目的是将较大的字体大小映射到移动设备上的较小大小
  • 但较小的字体大小不应映射到更小的字体(为了可读性)
• 我可以通过基于 rem 的内容和修改移动屏幕上的:root字体大小来实现这样的事情，但它显然会影响每个大小。我正在尝试查看是否可以将字体大小影响到某个阈值以上。

到目前为止我所做的事情的例子：

<p style="5.5rem">User-styled text</p>
:root {
font-size: 10px;
}
@media only screen and (max-width: 768px) {
:root {
font-size: 6px;
}
}

如前所述，这只能解决一半的问题(大尺寸，而不是小尺寸)。

目标是如下所示的映射：

Desktop -> Mobile
73-100 -> 50
65-72 -> 45
56-64 -> 40
35-55 -> 35
8-34 -> Don't touch

不确定这在 CSS 中是否可行(或 sass/less)，但我对想法持开放态度，即使它不严格符合标准(即足够接近)。如果可能的话，想要避免JS和全面的规则将比按元素处理更好。

Answer 1

我推荐这个计算器

@media (min-width: 30rem) {
:root {
font-size: calc(1rem + ((1vw - 0.3rem) * 1.1111));
}
}
@media (min-width: 120rem) {
:root {
font-size: 2rem;
}
}

<p>The root font size scales up and down proportionately, between defined values, dependent upon the viewport width.
</p>