如何正确使用css值的视口相对长度？ [英] How to properly use css-values viewport-relative-lengths?
问题描述
按是否有一种方法可以使用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 / dpi ， width
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)?
推荐答案
根据定义， a 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 ，或者换句话说， / code>将等于 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 （否则，我们将得到低于100％的放大率， 2vmin ，如果高度低于 50em ）。
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;}
}
ul 元素在规则适用时可由用户缩放（至少在我的Google Chrome中测试时），因此，总的来说，最佳做法的问题仍然存在。
(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值的视口相对长度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
