媒体查询和基本字体大小

Question

大家好，任何人都可以提供帮助。我正在使用移动优先网站进行设计，该网站的手机字体大小为 14px，平板电脑字体大小为 16，桌面字体大小为 18，我想将其转换为 em。我的问题是在媒体查询中，我应该为每种类型的屏幕重新定义基本字体，还是只使用 14px 基本字体并转换为 em？提前谢谢你。

Answer 1

或许您可以尝试视口大小的排版。如果您想要响应式字体，那就太好了。 CSS3 有一些新的值用于相对于当前视口大小调整事物的大小：vw、vh 和 vmin

例如：

1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger

用法：

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

Media queries and base font-size