媒体查询和基本字体大小 [英] Media queries and base font-size

问题描述

他们可以帮助任何人。我设计使用移动第一网站有14px字体大小为手机，16为平板电脑和18为桌面，我想转换为em。我的问题是在媒体查询应该重新定义基本字体为每种类型的屏幕或只是使用14px基本字体并转换为em？
提前谢谢。

hey guys can anyone assist on this . I a m designing using mobile first website that has 14px font-size for mobile, 16 for tablet and 18 for desktop which I want to converted to em. My question is in the media queries should I redefine the base font for each type of screen or just use the 14px base font and convert to em? Thank you in advance.

推荐答案

也许你可以尝试视口大小的排版。这是伟大的，如果你想要响应字体。 CSS3有一些新的值来调整相对于当前视口大小的内容：vw，vh和vmin

Maybe you can try viewport sized typography. It's great if you want responsive fonts. CSS3 has some new values for sizing things relative to the current viewport size: vw, vh, and 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;
}

此链接上的更多：
https://css-tricks.com/viewport-sized-typography/

这篇关于媒体查询和基本字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！