Как правильно использовать значения css-values ​​для просмотра в относительной длине?

Question

По Is there a way to up-size the font with CSS to fit the screen?, можно использовать css3-values/#viewport-relative-lengths (dev3, dev), vw, vh, vmin, vmax, чтобы сделать документ более текучим.

Однако, исходя из консервативной стороны, я хотел бы убедиться, что мое желание поместиться на экране на больших дисплеях не наносит вреда меньшим.

Я знаю, что с <meta name = 'viewport' content = 'width = device-width' /> и неявной font-size: 1em;, я должен гарантировать, что размер шрифта в моей странице будет в основном таким же, как размер шрифта элементов интерфейса, и никакого ненужного скроллинг не должен появляться, либо ,

Как указано выше, есть способ обеспечить vw/vh/vmin/vmax, чтобы никогда никогда не опускается ниже абсолютного значения выше относительной 1em? Возможно, что-то связано с CSS4/CSS3 media queries (dpi, width, length и т. Д.)?

Answer 1

По определению, единица vw должна представлять 1% (то есть 1/100) ширины окна просмотра. (Может кто-нибудь подтвердить, если это примерно то же самое для выгружаемого СМИ?)

Как таковой, если ширина окна просмотра 50em, то 1vw будет равен 0.5em, или, другими словами, 1em будет равна 2vw.

Таким образом, было бы действительно целесообразно использовать только vw в рамках медиа-запроса; он выглядит как самый простой и практичный визуальный дизайн, и математика должна была бы нацелить минимум 50em ширину (а также высоту), как указано выше, а затем 2vw (или, если мы также нацеливаем минимальную высоту на наш медиа-запрос, 2vmin) гарантировало бы, по меньшей мере, 1em, или, другими словами, это гарантирует, что увеличение всегда будет составлять не менее 100%.

Например, что касается списка категорий портов OpenBSD, то для увеличения списка категорий можно использовать следующее: если само окно слишком крупное и имеет достаточную высоту тоже, не затрагивая остальную часть страницы и не уменьшая опыт в окнах меньшего размера. Здесь мы используем vmin для борьбы со слишком большим увеличением в ландшафтном представлении (что приведет к прокрутке вверх/вниз), но вы должны быть осторожны, чтобы также указать min-height не менее 50em (в противном случае мы будем получать ниже 100% увеличения с 2vmin, если высота должна опуститься ниже 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), так что, в целом, вопрос для наилучшей практики до сих пор стоит ,)

Или, для малого бизнеса-карты стиль первой страницы, которые только перечислены ваши имя/адрес/контактные данные:

/* 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, так что чрезмерная и ненужная прокрутка, скорее всего, будет введена.