使用大众的响应式排版？答案

【问题标题】：Responsive typography using vw?使用大众的响应式排版？
【发布时间】：2019-12-23 19:21:15
【问题描述】：

我正在尝试使标题标题流畅地缩放到正确的字体大小。从桌面到移动。会使用 vw 正确的方法吗？如果是这样，是否有人有关于我如何完成响应式标题的备忘单？

.responsive-header {
  font-size: 2vw;
}

<Title className="responsive-header">
   Resonsive header. Should shrink depending on screen size
</Title>

【问题讨论】：

如果您希望 vw 在所有尺寸下相对于宽度完全相同，请使用。
根据您那里的 CodeSandbox，如果您的标题以 2vw 的方式改变大小，但您的 ui 的其余部分不是......
我想你会想读这个：css-tricks.com/books/volume-i/scale-typography-screen-size

标签： javascript css responsive-design

【解决方案1】：

rem's 和 Em's 的使用已针对响应式设计中的字体大小进行了标准化。所以你可能想用它们中的任何一个来代替。详细了解相对长度here

虽然您的代码可能会这样做。但是我如何制作响应式标题是

.responsive-header {
  width: 100vw;
  font-size: 2rem;
}

<Title className="responsive-header">
   Resonsive header. Should shrink depending on screen size
</Title>

【讨论】：