问题描述
根据 有没有办法用 CSS 放大字体以适应屏幕?，可以使用 css3-values/#viewport-relative-lengths (dev3, dev)、vw、vh、vmin、vmax、使文档更流畅.
As per Is there a way to up-size the font with CSS to fit the screen?, it's possible to use css3-values/#viewport-relative-lengths (dev3, dev), vw, vh, vmin, vmax, to make the document more fluid.
然而，从保守的角度来看，我想确保我希望将屏幕安装在较大的显示器上不会损害较小的显示器.
However, coming from the conservative side, I'd like to ensure that my desire to fit the screen on larger displays doesn't do harm on smaller ones.
我知道 <meta name = 'viewport' content = 'width = device-width'/> 和隐含的 font-size: 1em;，我应该保证我页面的字体大小与界面元素的字体大小基本相同，也不会出现不必要的滚动.
I know that with <meta name = 'viewport' content = 'width = device-width' /> and the implicit font-size: 1em;, I'm supposed to be guaranteed that the font size in my page will basically be the same as the font size of the interface elements, and no unnecessary scrolling should appear, either.
如上所述，有没有办法确保 vw/vh/vmin/vmax 永远不会曾经低于上述相对 1em 的绝对值吗?也许与 CSS4/CSS3 媒体查询(dpi、width、length 等)?
As per above, is there a way to ensure vw / vh / vmin / vmax to never ever go below the absolute value of the above relative 1em? Perhaps something do with with CSS4 / CSS3 media queries (dpi, width, length etc)?
推荐答案
根据定义，vw 单位应该代表视口宽度的 1%(即 1/100).(谁能确认分页媒体是否大致相同?)
By definition, a vw unit is supposed to represent 1% (i.e. 1/100th) of the width of the viewport. (Can anyone confirm if it's roughly the same for the paged media?)
因此，如果视口宽度为 50em，则 1vw 将等于 0.5em，或者换句话说，1em 等于 2vw.
As such, if the viewport width is 50em, then 1vw will equal 0.5em, or, in other words, 1em will equal 2vw.
因此，在媒体查询中只使用 vw 单元确实是个好主意；这似乎是最简单和最实用的视觉设计，数学上的目标是最小 50em 宽度(还有高度)，然后 2vw(或者，如果我们的媒体查询也以最小高度为目标，2vmin) 将保证至少意味着 1em，或者换句话说，它会保证放大率始终至少为 100%.
As such, it would indeed be a good idea to only ever use the vw unit within a media query; it seems like the easiest and most practical visual design and the math would be to target a minimum of 50em width (and also height) as above, and then 2vw (or, if we target minimum height with our media query, too, 2vmin) would guarantee to mean at least 1em, or, in other words, it would guarantee that the magnification will always be at least 100%.
例如，对于 OpenBSD 端口类别列表，以下可用于放大类别列表(如果窗口本身过大且高度足够)，而不会影响页面的其余部分，也不会降低体验在较小尺寸的窗户上.在这里，我们使用 vmin 来对抗横向视图中的过多放大(这会导致向上/向下滚动)，但您必须小心还指定了 min-height 也至少为 50em(否则，如果高度低于 50em，我们将使用 2vmin 获得低于 100% 的放大率代码>).
For example, as for OpenBSD ports category listing, the following could be used to magnify the list of the categories (if the window itself is oversized and has sufficient height, too) without affecting the rest of the page nor diminishing the experience on the smaller-sized windows. Here, we use vmin to combat against too much magnification in landscape view (which would result in up/down scrolling), but you have to be careful to also specify a min-height of at least 50em, too (otherwise, we'll be getting below 100% magnification with 2vmin, if the height were to fall below 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 元素无法被用户缩放，因此，总的来说，这个问题最好实践仍然有效.)
(Note that the above appears to detach the ul elements from being zoomable by the user when the rules apply (at least when tested in my Google Chrome), so, overall, the question for best practice still stands.)
或者，对于仅列出您的姓名/地址/联系方式的小型名片式首页:
Or, for a small business-card-style front page, which only lists your name/address/contact details:
/* 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 作为我们的单位.否则，仅使用2vw就会将真正的宽屏窗口放大太多，从而很可能会引入过度和不必要的滚动.
As I was writing this, I also realised that in order to avoid so much magnification as to cause the introduction of the scrolling, it seems like we must absolutely specify both the min-width and min-height of something like 50em, and then also use only the vmin as our unit. Otherwise, a really widescreen window will be magnified way too much with mere 2vw, such that excessive and unnecessary scrolling is very likely to get introduced.
这篇关于如何正确使用 css-values viewport-relative-lengths?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！