根据Is there a way to up-size the font with CSS to fit the screen?，可以使用css3-values/#viewport-relative-lengths（dev3，dev），True，vw，{{1} }，vh，使文档更具流动性。
然而，来自保守派方面，我想确保我在大屏幕上安装屏幕的愿望不会对较小的显示器造成伤害。
我知道使用vmin和隐式vmax，我应该保证我的页面中的字体大小基本上与界面元素的字体大小相同，并且也不应出现不必要的滚动。
如上所述，有没有办法确保<meta name = 'viewport' content = 'width = device-width' /> / font-size: 1em; / vw / vh永远不会低于上述相对{{}的绝对值1}？也许与CSS4 / CSS3 media queries（vmin，vmax，1em等相关的事情可以解决？
答案 0 :(得分：2)
根据定义，vw单位应该代表视口宽度的1％（即1/100）。 （任何人都可以确认它对于被寻呼的媒体是否大致相同？）
因此，如果视口宽度为50em，则1vw将等于0.5em，换句话说，1em将等于2vw。
因此，在媒体查询中仅使用vw单位确实是个好主意;它似乎是最简单和最实用的视觉设计，数学将是如上所述定位最小50em宽度（以及高度），然后是2vw（或者，如果我们以最小高度为目标）我们的媒体查询2vmin）也可以保证至少1em，或换句话说，它可以保证放大率始终至少为100％。
例如，对于OpenBSD端口类别列表，以下内容可用于放大类别列表（如果窗口本身尺寸过大且高度也足够），而不会影响页面的其余部分，也不会减少体验在较小的窗户上。在这里，我们使用vmin来对抗横向视图中的过多放大（这将导致向上/向下滚动），但是您必须小心地指定至少{{1}的min-height也是如此（否则，如果高度低于50em，我们将使用2vmin降低100％放大率。）
50em（请注意，上述内容似乎会在规则适用时将@media (min-width: 50em) and (min-height: 50em) {
/* guarantees at least 1em in all viewports */
ul {font-size: 2vmin; -webkit-columns: 4;}
}
元素与用户进行缩放（至少在我的Google Chrome浏览器中进行测试时），因此，总体而言，最佳做法的问题仍然存在。）
或者，对于小型名片式首页，它只列出您的姓名/地址/联系方式：
ul在我写这篇文章时，我也意识到为了避免引起滚动的大量放大，似乎我们必须绝对指定/* automatically magnify business-card-style page in large viewports */
/* please don't use this unless you yourself posses a large monitor! */
@media (min-width: 50em) and (min-height: 64em) {
/* start with 100% at 50em, we'll have 150% magnification at 75em */
html {font-size: 2vmin;}
}
@media (min-width: 75em) and (min-height: 96em) {
/* start with 225% magnification at 75em (75 / 100 * 3 = 2.25) */
html {font-size: 3vmin;}
}
和min-width像min-height这样的东西，然后也只使用50em作为我们的单位。否则，真正的宽屏窗口将仅仅vmin放大太多，以至于很可能引入过多和不必要的滚动。