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（或无赖/少用）中是否可以做到这一点，但是我很愿意接受想法，即使它与条件不完全匹配（即足够接近）。如果可能的话，要避免使用JS，而要使用扫除规则，则比逐元素处理要好。

Answer 1

我推荐这个calculator

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

带有CSS的手机的字体大小的映射范围

1 个答案: