Css 更改字体大小响应设计

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

我有一个网站。字体大小为2em（笔记本）。当我用galaxy等工具查看页面（Chrome Emulator）时，它看起来不错。当我使用iPad等设备进行检查时，字体会变小

所以我要做的是，每个手机的字体大小都合适吗？我是否必须为每个“宽度”写一个额外的媒体查询来设置字体大小

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

}

---

我必须为每一个屏幕尺寸写作吗？或者我能做些什么使它适用于每个屏幕？

css3有与

视口相关的单元。比如

vh-用于视口高度，vw-用于视口宽度

示例-

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

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

它变为视口宽度的2%。因此，它变得反应灵敏

整个过程将在下面的文章中详细解释

响应性网页设计：
CSS3引入了一些新的单位，包括rem单位，它代表“根em”。em单位与父项的字体大小有关，这导致了复合问题。rem单位是相对于根或html元素的。这意味着我们可以在html元素上定义单个字体大小，并将所有rem单位定义为该字体大小的一个百分比。因此，您可以编写如下代码（基于750px）：


如果我假设你的ipad分辨率是768*1024，
font size:2rem。因此，最终渲染结果：

  #mediendesign {
  font-size: 17.0944px;/* (53.42%/62.5%)*10px*2rem=17.0944px */
  color: #ffffff;
  }

最后，您可以调整
html{font size:xx%}
以满足您的需求

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

  #mediendesign {
  font-size: 17.0944px;/* (53.42%/62.5%)*10px*2rem=17.0944px */
  color: #ffffff;
  }