css3 - How to properly use css-values viewport-relative-lengths? -

as per is there way up-size font css fit screen?, it's possible use css3-values/#viewport-relative-lengths (dev3, dev), vw, vh, vmin, vmax, make document more fluid.

however, coming conservative side, i'd ensure desire fit screen on larger displays doesn't harm on smaller ones.

i know <meta name = 'viewport' content = 'width = device-width' /> , implicit font-size: 1em;, i'm supposed guaranteed font size in page same font size of interface elements, , no unnecessary scrolling should appear, either.

as per above, there way ensure vw / vh / vmin / vmax never ever go below absolute value of above relative 1em? perhaps with css4 / css3 media queries (dpi, width, length etc)?

by definition, vw unit supposed represent 1% (i.e. 1/100th) of width of viewport. (can confirm if it's same paged media?)

as such, if viewport width 50em, 1vw equal 0.5em, or, in other words, 1em equal 2vw.

as such, indeed idea ever use vw unit within media query; seems easiest , practical visual design , math target minimum of 50em width (and height) above, , 2vw (or, if target minimum height our media query, too, 2vmin) guarantee mean @ least 1em, or, in other words, guarantee magnification @ least 100%.

for example, openbsd ports category listing, following used magnify list of categories (if window oversized , has sufficient height, too) without affecting rest of page nor diminishing experience on smaller-sized windows. here, use vmin combat against magnification in landscape view (which result in up/down scrolling), have careful specify min-height of @ least 50em, (otherwise, we'll getting below 100% magnification 2vmin, if height fall below 50em).

@media (min-width: 50em) , (min-height: 50em) {   /* guarantees @ least 1em in viewports */   ul {font-size: 2vmin; -webkit-columns: 4;} } 

(note above appears detach ul elements being zoomable user when rules apply (at least when tested in google chrome), so, overall, question best practice still stands.)

or, small business-card-style front page, lists name/address/contact details:

/* automatically magnify business-card-style page in large viewports */ /* please don't use unless posses large monitor! */ @media (min-width: 50em) , (min-height: 64em) {   /* start 100% @ 50em, we'll have 150% magnification @ 75em */   html {font-size: 2vmin;} } @media (min-width: 75em) , (min-height: 96em) {   /* start 225% magnification @ 75em (75 / 100 * 3 = 2.25) */   html {font-size: 3vmin;} } 

as writing this, realised in order avoid magnification cause introduction of scrolling, seems must absolutely specify both min-width , min-height of 50em, , use vmin our unit. otherwise, widescreen window magnified way mere 2vw, such excessive , unnecessary scrolling introduced.