css - 更改字体大小响应式设计

Question

我只有一个问题。所以也许我会更好地理解这个问题。

我有一个网站。字体大小将为 2em(笔记本)。当我使用例如检查页面(Chrome 模拟器)时银河它看起来不错。当我检查它时iPad 字体的大小会更小。

那么我必须做的是，字体大小是否适合每部手机？我是否必须为每个“宽度”编写一个额外的媒体查询来设置字体大小？

#mediendesign {
    font-size: 2rem;
    color: #ffffff;

}

我必须为每个屏幕尺寸编写吗？或者我该怎么做才能让它适用于每个屏幕？

Answer 1

CSS 3 具有与viewport 相关的单位。比如

vh - 视口(viewport)高度和 vw - 视口(viewport)宽度

示例-

如果你这样定义你的字体大小

   #mediendesign {
    font-size: 2vw;
    color: #ffffff;
}

它变成视口(viewport)宽度的 2%。因此它变得有响应。

整个事情在下面的文章中有详细解释。

Viewport Sized Typography