Содержание

Установка размеров с помощью единиц vw и vh / Хабр

В CSS3 появились новые единицы измерения. (Я, кажется, уже говорил об этом.eng) Вы уже слышали о px, pt, em и новых rem. Давайте рассмотри еще несколько: vw и vh.

Часто в макете есть элементы, которые гарантировано должны умещаться во вьюпорт браузера. В общем случае для этого используется JavaScript. Проверям размер вьюпорта и изменяем размеры элементов соответствующим образом. Если пользователь изменяет размер окна браузера, то процедура повторяется.

С помощью vw/vh мы можем устанавливать размер элементов относительно размера вьюпорта. Единицы vw/vh интересны тем, что 1vw — единица равная 1/100’ой ширины вьюпорта. Что бы присвоить элементу ширину, равную ширине вьюпорта, например, надо установить width:100vw.

Как это можно использовать

Лайтбоксы — прекрасный кандидат для использования vw и vh, так как обычно позиционируется относительно вьюпорта, однако мне кажется, что position:fixed со значениями top, bottom, left и right использовать проще, так как можно вообще не устанавливать высоту и ширину.

Можно использовать новые единицы измерения для установки размеров элементов, которые находятся в нормальном потоке. Например, я могу разместить на странице скриншоты. Высота этих скриншотов не должна превышать высоту вьюпорта. Для этого я могу установить максимальную высоту изображений:

img { max-height:95vh; }

В данном случае я устанавливаю высоту 95vh что бы оставить немного места вокруг, когда они на экране.

Поддержка браузерами

Если rem поддерживаются почти всеми основными браузерами включая IE9, то с использованием vw и vh стоит повременить. На данный момент их поддерживает только Internet Explorer 9.
Ссылки

Спецификацияeng
Единицы vm

По совету gd666 решил немного дополнить.
Есть еще одна единица измерения, связанная с вьюпортом, о которой не упомянули в оригинале статьи. Это vm.

vm рассчитывается относительно ширины или высоты вьюпорта, в зависимости от того, что из них меньше. Меньшая из величин равна 100 vm. При изменении размеров вьюпорта соответствующим образом изменяються размеры, заданные в vm.

Про нее можно прочесть в спецификации.eng

— CSS | MDN

CSS тип данных <length> представляет единицу длины. Длина может быть использована в таких свойствах CSS как width, height, margin, padding,

border-width, font-size, и text-shadow.

Обратите внимание: Хоть значения <percentage> также определяют размеры и могут использоваться в некоторых свойствах, принимающих значения типа <length>, они не являются <length> значениями.

Тип данных <length> состоит из <number>, за которым следует одна из единиц измерения, перечисленных ниже. Как и у любых единиц измерения CSS между числом и единицей нет знака пробела. После числа 0 единица измерения необязательна.

Обратите внимание: Некоторые свойства допускают использование отрицательных значений <length>, а некоторые нет.

Относительные единицы измерения

Относительные единицы измерения представляют расстояние, определённое какой-либо другой величиной. В зависимости от единицы, это может быть размер определённого символа, высота строки или размер viewport.

Единицы, зависящие от шрифта

Единицы, зависящие от шрифта, определяют значение <length>, используя размер какого-либо символа или характеристики шрифта, который применяется к элементу или его родителю.

Обратите внимание:

 Эти единицы, особенно em и rem, часто используются для создания адаптивных разметок, которые сохраняют вертикальную структуру страницы даже если пользователь изменяет размер шрифта.

cap Это экспериментальное API, которое не должно использоваться в рабочем коде.
Представляет высоту заглавных букв в шрифте, применённом к элементу.
ch
Представляет ширину символа «0» (ноль, символ Юникод U+0030) в шрифте, применённом к элементу.
em
Представляет подсчитанный размер шрифта элемента. Если используется в свойстве font-size, представляет
унаследованный размер шрифта.
ex
Представляет x-height (обычно высоту буквы x) в шрифте, применённом к элементу. В шрифтах с буквой x это обычно высота букв в нижнем регистре; во многих шрифтах 1ex ≈ 0.5em.
ic Это экспериментальное API, которое не должно использоваться в рабочем коде.
Равна используемой в шрифте ширине символа «水» (ККЯ, символ «вода», U+6C34).
lh Это экспериментальное API, которое не должно использоваться в рабочем коде.
Равна рассчитанному значению свойства line-height, переведённому в абсолютные единицы измерения.
rem
Представляет размер шрифта корневого элемента (обычно 
<html>). Когда используется в свойстве font-size корневого элемента, представляет значение по умолчанию (в большинстве браузеров 16px, но настройки пользователя могут переопределить это значение).
rlh Это экспериментальное API, которое не должно использоваться в рабочем коде.
Равна рассчитанному значению свойства line-height корневого элемента (обычно <html>), переведённому в абсолютные единицы измерения. Когда используется в свойстве font-size корневого элемента, представляет значение по умолчанию.
Единицы, зависящие от размеров экрана

Эти единицы определяют значение 

<length> относительно размеров экрана, то есть видимой части документа. эти единицы недопустимы в блоках @page.

vh
Равна 1% высоты блока содержимого.
vw
Равна 1% ширины блока содержимого.
vi Это экспериментальное API, которое не должно использоваться в рабочем коде.
Равна 1% размера блока содержимого по направлению выстраивания строчных элементов.
vb Это экспериментальное API, которое не должно использоваться в рабочем коде.
Равна 1% размера блока содержимого по направлению выстраивания блочных элементов.
vmin
Равна vh или vw в зависимости от того, что из них меньше.
vmax
Равна vh или vw в зависимости от того, что из них больше.
Абсолютные единицы измерения

Абсолютные единицы измерения представляют физические расстояния, когда известны физические свойства устройства вывода. Одна из единиц привязывается к физической единице, а все остальные к ней. Привязка делается по-разному для устройств с низким разрешением, таких как экраны, и высоким, таких как принтеры.

Для устройств с маленьким dpi (dots per inch — количество точек на дюйм) единица измерения px представляет физический пиксель; остальные единицы определяются относительно него.

Таким образом, 1in определяется как 96px, что равно 72pt. Последствием такого способа определения является то, что длины, описанные в дюймах (in), сантиметрах (cm) или миллиметрах (mm) необязательно равны одноимённым физическим единицам.

Для устройств с высоким dpi дюймы (in),сантиметры (cm) и миллиметры (mm) такие же, как и соответствующие физические единицы. Таким образов, единица px определяется относительно их (1/96 одного дюйма).

Обратите внимание: Многие пользователи увеличивают стандартный размер шрифта браузера для удобства чтения. Длины, заданные абсолютными единицами могут вызвать проблемы с доступностью, так как они привязаны к физическим величинам и не масштабируются при изменении настроек. Поэтому предпочтительнее использовать относительные единицы (такие как em или rem) в свойстве font-size.

px
Один пиксель. Для устройств с дисплеев традиционно представляет одну точку. Тем не менее, на принтерах и экранах с высоким разрешением один пиксель CSS равен нескольким пикселям дисплея.
1px = 1/96  от 1in.
cm
Один сантиметр. 1cm = 96px/2.54.
mm
Один миллиметр. 1mm = 1/10 от 1cm.
Q Это экспериментальное API, которое не должно использоваться в рабочем коде.
Четверть миллиметра. 1Q = 1/40 от 1cm.
in
Один дюйм. 1in = 2.54cm = 96px.
pc
Одна пайка. 1pc = 12pt = 1/6 от 1in.
pt
Одна точка. 1pt = 1/72 от1in.
mozmm Это API не было стандартизировано., удалена в Firefox 59
Экспериментальная единица, которая равна одному физическому миллиметру вне зависимости от размера и разрешения экрана. Такая единица требуется очень редко, но может понадобиться, особенно на маленьких устройствах.

Четыре единицы измерения CSS на основе области просмотра

От автора: прошло несколько лет с тех пор, как единицы измерения на основе области просмотра были впервые представлены в CSS. Они действительно являются «адаптивными единицами длины» в том смысле, что их значение меняется каждый раз, когда изменяется размер окна браузера. Если вы слышали об этих единицах раньше, но хотите узнать о них подробнее, эта статья может вам помочь.

Единицы и их значения

В CSS есть четыре единицы измерения на основе области просмотра. Это vh, vw, vmin и vmax.

Высота области просмотра (vh). Эта единица основана на высоте области просмотра. Значение 1vh равно 1% от высоты области просмотра.

Ширина области просмотра (vw). Эта единица основана на ширине области просмотра. Значение 1vw равно 1% ширины области просмотра.

Минимальная сторона области просмотра (vmin). Эта единица основана на меньшей стороне области просмотра. Если высота области просмотра меньше ширины, значение 1vmin будет равно 1% от высоты области просмотра. Точно так же, если ширина области просмотра меньше, чем высота, значение 1vmin будет равно 1% ширины области просмотра.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Максимальная сторона области просмотра (vmax). Эта единица основана на большей стороне области просмотра. Если высота области просмотра больше ширины, значение 1vmax будет равно 1% от высоты области просмотра. Точно так же, если ширина области просмотра больше, чем высота, значение 1vmax будет равно 1% ширины области просмотра.

Посмотрим, какие значения будут у этих единиц в разных ситуациях:

Если область просмотра имеет ширину 1200px и высоту 1000px, значение 10vw будет 120px, а значение 10vh будет 100px. Поскольку ширина области просмотра больше его высоты, значение 10vmax будет 120px, а значение 10vmin будет 100px.

Если устройство поворачивается так, что область просмотра будет иметь 1000 пикселей в ширину и 1200 пикселей в высоту, значение 10vh будет 120 пикселей, а значение 10vw будет 100 пикселей. Интересно, что значение 10vmax все равно будет 120px, потому что теперь оно будет определяться на основе высоты области просмотра. Точно так же значение 10vmin по-прежнему будет 100px.

Если вы измените размер окна браузера так, чтобы область просмотра будет шириной 1000 пикселей и высотой 800 пикселей, значение 10vh станет 80 пикселей, а значение 10vw станет 100 пикселей. Аналогично, значение 10vmax станет 100px, а значение 10vmin станет 80px.

На этом этапе единицы измерения на основе области просмотра могут выглядеть аналогично процентам. Тем не менее, они очень разные. В случае процентов ширина или высота дочернего элемента определяется относительно его родителя. Вот пример:

Как вы можете видеть, ширина первого дочернего элемента установлена равной 80% ширины его родительского элемента. Однако второй дочерний элемент имеет ширину 80vw, что делает его шире, чем его родительский элемент.

Применение единиц измерения на основе области просмотра

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

Полноэкранные фоновые изображения или разделы

Очень часто для элементов, которые полностью покрывают экран, устанавливают фоновые изображения. Точно так же вы можете создать веб-сайт, где каждый отдельный раздел о товаре или услуге должен охватывать весь экран. В таких случаях вы можете установить ширину соответствующих элементов равной 100%, а их высоту равной 100vh.

В качестве примера возьмем следующий HTML:

<div> <p>a<p> </div>

<div>

  <p>a<p>

</div>

Вы можете создать фоновое изображение полноэкранного раздела, используя:

. fullscreen { width: 100%; height: 100vh; padding: 40vh; } .a { background: url(‘path/to/image.jpg’) center/cover; }

.fullscreen {

  width: 100%;

  height: 100vh;

  padding: 40vh;

}

 

.a {

  background: url(‘path/to/image.jpg’) center/cover;

}

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Создание точно подогнанных заголовков

Плагин JQuery FitText может быть использован для масштабирования заголовков таким образом, что они занимают всю ширину родительского элемента. Как мы упоминали ранее, значение единиц на основе области просмотра изменяется напрямую в зависимости от размера области просмотра. Это означает, что если вы используете эти единицы измерения, чтобы установить font-size для заголовков, они будут идеально вписываться в экран. При изменении ширины области просмотра браузер также автоматически масштабирует текст заголовка соответствующим образом. Единственное, что вам нужно сделать — это определить правильное начальное значение font-size в единицах измерения на основе области просмотра.

Одна из основных проблем с настройкой font-size для этого способа заключается в том, что размер текста будет сильно различаться в зависимости от области просмотра. Например, font-size для 8vw будет вычисляться в 96px для ширины области просмотра 1200px, 33px для ширины области просмотра 400px и 154px для ширины области просмотра 1920px. Это может сделать шрифт слишком большим или слишком маленьким.

Простое центрирование элементов

Единицы измерения на основе области просмотра могут быть очень полезны, когда вы хотите поместить элемент точно в центр экрана. Если вы знаете высоту элемента, вам просто нужно установить верхнее и нижнее значение свойства margin равным [(100 — height)/2]vh:

.centered { width: 60vw; height: 70vh; margin: 15vh auto; }

. centered {

  width: 60vw;

  height: 70vh;

  margin: 15vh auto;

}

Однако в настоящее время мы можем использовать Flexbox или CSS Grid для центрирования элементов как по вертикали, так и по горизонтали.

Что нужно помнить

Если вы решите использовать в своих проектах единицы измерения на основе области просмотра, есть несколько вещей, о которых следует помнить.

Будьте осторожны при настройке ширины элемента. Это связано с тем, что когда для свойства overflow корневого элемента установлено в значение auto, браузеры предполагают, что полосы прокрутки не существуют. Это сделает элементы немного шире, чем вы ожидаете. Рассмотрим разметку с четырьмя элементами div:

div { height: 50vh; width: 50vw; float: left; }

div {

  height: 50vh;

  width: 50vw;

  float: left;

}

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

Установка ширины дивов не 50vw, а 50% решит эту проблему. Вывод заключается в том, что вы должны использовать проценты при установке ширины для блочных элементов, чтобы полосы прокрутки не мешали вычислению их ширины.

Подобная проблема также может возникать на мобильных устройствах из-за адресной строки, которая может появляться или исчезать в зависимости от того, прокручивает пользователь страницу или нет. Это изменит высоту области просмотра, и пользователь заметит внезапные скачки при просмотре контента.

Поддержка браузерами

Судя по данным, доступным на Caniuse, все основные браузеры поддерживают эти единицы измерения. Тем не менее, есть несколько ошибок и проблем, о которых вы должны знать при использовании единиц измерения на основе области просмотра. Например, в Firefox есть задокументированная ошибка, связанная с тем, что 100vh не оказывает никакого влияния на элемент, для свойства display которого установлено table. Опять же, Chrome не поддерживает единицы измерения на основе области просмотра для ширины границ, пробелов столбцов, значений преобразования, теней полей или в calc() вплоть до версии 34. Ознакомьтесь с данными Caniuse для получения полного списка известных ошибок.

Автор: Asha Laxmi, Maria Antonietta Perna

Источник: //www.sitepoint.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Web-разработка • HTML и CSS

В CSS3 были добавлены новые относительные единицы измерения vh и vw, которые вычисляются относительно размеров окна браузера. Для настольных компьютеров ширина окна браузера больше ширины области просмотра (добавляется ширина скроллбара), поэтому если для элемента установить ширину 100vw, то он выйдет за пределы html.

Единица Описание
vh Эквивалентно 1% высоты окна браузера
vw Эквивалентно 1% ширины окна браузера

Адаптивное полноэкранное фоновое изображение

Так как ширина элемента, указанная с помощью 100vw, больше ширины области просмотра, то для создания полноэкранных фоновых изображений лучше использовать ширину 100%, которая будет равна ширине корневого элемента html. 

.fullscreen-background {
    background: url(image.jpg);
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100vh;
}

Блок на всю высоту окна браузера

Чтобы сделать блок на всю высоту окна браузера, необходимо задать height: 100% для трёх элементов — html, body и непосредственно для самого блока: 

html, body {
    height: 100%;
}
section {
    height: 100%;
}

Так как процентные размеры вычисляются относительно значений родительских элементов, то необходимо установить соответствующие значения для каждого элемента DOM. Единица измерения vh не требует установки значений по цепочке, так как её значение вычисляется напрямую относительно окна браузера: 

section {
    height: 100vh;
}

Выравнивание элемента по центру страницы

Высоту, заданную с помощью vh, также можно использовать для выравнивания элемента по центру страницы: 

body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Теперь любой элемент будет расположен строго по центру без каких-либо дополнительных приёмов.

Поиск: CSS • Web-разработка • Верстка • Высота • Ширина • Окно браузера • ViewPort • Width • Height • Выравнивание

vw vh css

Всем привет. Сегодня будут рассмотрены относительные единицы измерения появившиеся в спецификации css3. Итак, поехали!

Допустим у нас есть изображение: 

<style>
    *{
        padding:0;
        margin:0;
    }
</style>
<img src="img/img. jpg">

И мы хотим сделать это изображение на весь экран. Здесь мы можем поступить двумя способами, либо использовать процентные единицы измерения: 

img{
    width:100%;
    height:100%;
}

Или же воспользоваться относительными: 

img{
    width:100vw;
    height:100vh;
}

vw — относительная единица ширины окна,vh — относительная единица высоты окна.

Главным отличием относительных единиц измерения vm, vh от процентных заключается в том что они высчитываются относительно полной ширины и высоты всего окна.

К примеру если полная ширина окна является 1200px, то 1vw будет равняться 12px, а следовательно 100vw полной ширине 1200px. Причем ширина 100vw будет учитываться без полосы прокрутки и поэтому у нас может появится горизонтальный скролл. Помните про это!

Тоже самое и с высотой vh. Если высота окна равняется 10000px, 1vh будет равняться 100px, а 100vh это полная высота окна. Мы также можем указывать значения выходящие за пределы размеров высоты и ширины окна. (300vh,400vw)

Данные единицы измерения как и процентные, отлично переносят масштабирование.

Еще есть такие интересные единицы измерения vmin и vmax.

Допустим ширина нашего окна 1200px, а высота 10000px. Единица измерения vmin — берет минимальный размер из отношения ширины и высоты окна. В нашем случае ширина является минимальным размером 1200px(1vmin=12px), высота максимальным 10000px(1vmax=100px).

Вывод: относительные единицы измерения (vw, vh, vmin, vmax) работают по принципу процентных единиц измерения, но не зависят от размеров элементов и блоков страницы.

Размер высчитывается в процентном соотношении относительно ширины и высоты страницы.

На этом у меня все. Если появились вопросы оставляйте их в комментариях или группе

вк

Я с вами прощаюсь. Желаю успехов и удачи! Пока!

Hokevems

12:26 23-03-2020

<a href=»https://parfilagedg. info/casual-dating-belgium/»>https://parfilagedg.info/casual-dating-belgium/</a>

KiaEvive

14:06 22-07-2019

[url=http://kamagra50.com/]kamagra online[/url]

EyeEvive

13:19 21-07-2019

<a href=»https://kamagra50.com/»>kamagra 100mg</a>

DenEvive

11:59 21-07-2019

<a href=»https://kamagra50.com/»>kamagra online</a>

JasonEvive

18:49 17-07-2019

<a href=»https://kamagra50.com/»>kamagra</a>

CSS единиц-в чем разница между vh/vw и %?



Я только что узнал о новом и необычном устройстве CSS. vh и vw измеряют процент высоты и ширины окна просмотра соответственно.

Я посмотрел на этот вопрос из Stack Overflow, но это сделало единицы еще более похожими.

Как работает vw и vh unit

Ответ, в частности, говорится:

vw и vh-это процент ширины и высоты окна соответственно: 100vw-это 100% ширины, 80vw — 80%, и т. д.

Это похоже на то же самое, что и блок % , который более распространен.

В инструментах разработчика я попытался изменить значения с vw/vh на % и наоборот и получил тот же результат.

Есть ли разница между ними? Если нет, то почему эти новые единицы были введены в CSS3 ?

css viewport-units
Поделиться Источник Richard Hamilton     25 июня 2015 в 01:58

5 ответов

  • Как написать css запасных вариантов для vh vw

    Может ли кто-нибудь объяснить, как работают резервные варианты в CSS? Я пытаюсь настроить его для vh и vw, и ясно, что я его не получаю… Вот моя попытка решения, которая не работает. Свойство height берется каждый раз. CSS: -webkit-height: 5.2vh; -moz-height: 5.2vh; -ms-height: 5.2vh; -o-height:…

  • CSS единиц vh внутри iframe

    Я пытаюсь использовать CSS vh единиц внутри iframe. Я нахожу, что они каким-то образом масштабируются до размера iframe. Другими словами, 100vh-это не высота окна. Он установлен на высоту iframe. Кажется ли это правильным? Есть ли обходной путь?


173

100% может быть 100% высоты чего угодно. Например, если у меня есть родитель div , который имеет рост 1000px , и ребенок div , который находится на высоте 100% , то этот ребенок div теоретически может быть намного выше высоты окна просмотра или намного меньше высоты окна просмотра, даже если этот div установлен на высоте 100% .

Если вместо этого я сделаю этот дочерний div равным 100vh , то он заполнит только 100% высоты окна просмотра, а не обязательно Родительский div .

body,
html {
    height: 100%;
}

.parent {
    background: lightblue;
    float: left;
    height: 200px;
    padding: 10px;
    width: 50px;
}

.child {
    background: pink;
    height: 100%;
    width: 100%;
}

.viewport-height {
    background: gray;
    float: right;
    height: 100vh;
    width: 50px;
}
<div>
    <div>
        100% height
        (parent is 200px)
    </div>
</div>

<div>
    100vh height
</div>

Поделиться Josh Beam     25 июня 2015 в 02:02


29

Я знаю, что этот вопрос очень стар, и @Josh Луч обратился к самой большой разнице, но есть еще один:

Предположим, у вас есть <div>, прямой потомок <body> , который вы хотите заполнить весь видовой экран, поэтому вы используете width: 100vw; height: 100vh; . Все это работает точно так же, как width: 100%; height: 100vh; , пока вы не добавите больше контента и не появится вертикальная полоса прокрутки. Поскольку vw учитывает полосу прокрутки как часть окна просмотра, width: 100vw; будет немного больше, чем width: 100%; . Эта небольшая разница заканчивается добавлением горизонтальной полосы прокрутки (необходимой для того, чтобы пользователь видел эту небольшую дополнительную ширину), и, как следствие, высота также будет немного отличаться в обоих случаях.

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

Пример:

Использование width:100vw; :

.fullviewport {
  width: 100vw;
  height: 100vh;
  background-color: red;
}

.extracontent {
  width: 100vw;
  height: 20vh;
  background-color: blue;
}
<html>
<body>
<div></div>
<div></div>
</body>
</html>

Использование width:100%; :

.fullviewport {
  width: 100%;
  height: 100vh;
  background-color: red;
}

.extracontent {
  width: 100%;
  height: 20vh;
  background-color: blue;
}
<html>
<body>
<div></div>
<div></div>
</body>
</html>

Поделиться IanC     05 декабря 2017 в 11:43


2

Спасибо Вам за ваш ответ и пример кода, @IanC. он мне очень помог. Уточнение: Я полагаю, что вы имели в виду «scrollbar», когда писали «sidebar.»

Вот некоторые связанные с этим обсуждения о единицах просмотра подсчета полос прокрутки, которые я также нашел полезными:

Спецификация W3C для блоков vw, vh, vmin, vmax («viewport percentage lengths») says «any scrollbars are assumed not to exist».

Очевидно, Firefox вычитает ширину полосы прокрутки из 100vw, как @Nolonar’s комментирует разницу между Width:100% и width:100vw? замечает, цитируя «Can I Use».

Могу ли я использовать , возможно, в напряжении со спецификацией (?), говорит, что все браузеры, кроме Firefox в настоящее время «incorrectly», считают 100vw всей шириной страницы, включая вертикальную полосу прокрутки.

Поделиться Slack Undertow     19 мая 2018 в 00:18

  • CSS VW и VH — поддерживать соотношение

    У меня есть страница, которая содержит DIV, который поддерживает соотношение сторон. У меня есть некоторый текст в div, который использует VW для размера шрифта, который поддерживает размер текста при изменении ширины страницы — и это здорово. Но когда пользователь меняет высоту окна — я не могу…

  • настройка размера шрифта css по vh и vw

    Итак, у меня есть текст, который я хочу автоматически изменить в зависимости от размера его контейнера. Однако если я использую что-то вроде font-size: 5vw; это выглядит хорошо, но когда я сжимаю страницу, высота начинает становиться слишком маленькой Есть ли в любом случае, что я могу изменить…


1

единицы измерения vw (view-width) и vh (view-height) соотносятся с размером порта просмотра, где 100vw или vh — это 100% из width/height. порта просмотра

Например, если видовой порт имеет ширину 1600 пикселей и вы указываете что-то как 2vw, это будет эквивалентно 2% ширины видового порта или 32px.

% unit всегда основан на ширине родительского элемента текущего элемента

Поделиться Unknown     26 апреля 2018 в 09:57


0

Есть разница, которая не обязательно была поднята. 100vw включает в себя ширину полосы скрула, в то время как 100% не включает ее. Это небольшая разница, но важная при проектировании.

Поделиться Unknown     17 июля 2019 в 20:05

Похожие вопросы:


«vw» CSS единиц в calc в хроме не работает

Новые vw (и vh , vmin и vmax ) CSS единиц весьма полезны, как и calc . Оба они прекрасно работают в Chrome (последний имеет префикс -webkit-calc ), но по какой-то причине я обнаружил, что значения…


использование modernizr для обнаружения vh, vw с calc

Поэтому, я столкнулись с проблемой, когда браузер совместим с VH, VW и единиц и совместимые с calc(), BUT не совместим с VH,VW и единиц в Calc. Поэтому я не уверен, как использовать modernizr для…


Как пересчитать значения css vw и vh после изменения размера?

Я использую значения vw и vh в своем преобразовании CSS. Это приводит к тому, что анимация css использует фактическую ширину окна. В этом случае изображение cloud перемещается слева направо экрана….


Как написать css запасных вариантов для vh vw

Может ли кто-нибудь объяснить, как работают резервные варианты в CSS? Я пытаюсь настроить его для vh и vw, и ясно, что я его не получаю… Вот моя попытка решения, которая не работает. Свойство…


CSS единиц vh внутри iframe

Я пытаюсь использовать CSS vh единиц внутри iframe. Я нахожу, что они каким-то образом масштабируются до размера iframe. Другими словами, 100vh-это не высота окна. Он установлен на высоту iframe….


CSS VW и VH — поддерживать соотношение

У меня есть страница, которая содержит DIV, который поддерживает соотношение сторон. У меня есть некоторый текст в div, который использует VW для размера шрифта, который поддерживает размер текста…


настройка размера шрифта css по vh и vw

Итак, у меня есть текст, который я хочу автоматически изменить в зависимости от размера его контейнера. Однако если я использую что-то вроде font-size: 5vw; это выглядит хорошо, но когда я сжимаю…


В чем разница между использованием vh/vw vpx и обычным PX/%?

Я использовал SOF в течение долгого времени, но никогда не задавал вопросов. Сегодня я был на сайте Firefox и заметил, что он говорит о px и%, как будто он устарел. Сайт предложил использовать…


Как использовать vw и vh css с React Native

Я создаю базовый логин с помощью React Native с логотипом и 2 входами: //import liraries import React, { Component } from ‘react’; import { View, Text, StyleSheet, Image } from ‘react-native’; //…


Как рассчитать соотношение между vw и vh в CSS году

Я работал на веб-сайте, и поскольку я пытаюсь использовать свойство clip-path в div для создания формы стрелки, которая должна быть прямоугольным треугольником, я уже получаю этот результат:…

Единицы измерения в CSS | Techrocks

Перевод статьи «Units in CSS (em, rem, pt, px, vw, vh, vmin, vmax, ex, ch, …)».

В CSS есть разные единицы измерения. Больше всего известны пиксели, но есть и другие – не такие популярные, но весьма удобные в некоторых случаях.

В этой статье мы рассмотрим относительные и абсолютные единицы измерения, а также единицы измерения области просмотра (viewport-единицы).

Относительные единицы измерения

Размеры в CSS можно указывать не только в абсолютных единицах, таких как пиксели, поинты или сантиметры, но и в относительных – в процентах, em или rem. Использование относительных единиц измерения также помогает придерживаться стандартов доступности.

В большинстве браузеров по умолчанию установлен размер шрифта 16px. Это значение можно использовать при расчетах (например, 16px равны 1em, 1rem или 100%).

Давайте рассмотрим, какие же относительные единицы измерения у нас есть.

  • % – измерение в процентах.
  • em – размер шрифта относительно обычного, т. е., если шрифт имеет размер 2.5em, значит, он в 2,5 раза больше обычного шрифта.
  • rem – размер шрифта относительно корневого элемента документа.
  • ch – ширина символа «0». В моноширинных шрифтах, где все символы имеют одинаковую ширину, 1ch это ширина одного символа.
  • ex – x-высота текущего шрифта, измеряется в высоте символа «х» в нижнем регистре.

See the Pen CSS Relative Units by Matthias (@fullstack-to) on CodePen.

Чем отличаются em и rem?

Разница между этими единицами в наследовании. Значение rem основывается на корневом элементе (html). Каждый дочерний элемент в качестве основы для вычислений использует размер шрифта элемента html.

А в единицах em вычисления основаны на размере шрифта родительского элемента.

rem очень упрощает вычисления размеров шрифтов. Если размер шрифта в элементе не зависит от размера шрифта родителя, это очень удобно, например, для вложенных элементов или даже нескольких вложенных элементов, таких как списки. Единицы rem всегда вычисляются относительно размера шрифта в теге html.

Различные семейства шрифтов

Все представленные на картинке шрифты имеют один размер (18pt), но благодаря красной линии видно, что x-высота (ex) у этих шрифтов разная.

На этой картинке шрифты имеют все тот же одинаковый размер (18pt). Но они отличаются шириной, т. е., их размер в единицах ch будет разным. Символы моноширинных шрифтов имеют одинаковую ширину, а в serif или sans-serif символы отличаются по ширине (например, «i» будет уже, чем «o»).

Абсолютные единицы измерения

Абсолютные единицы измерения имеют фиксированный размер (нельзя же принять какой-то свой размер сантиметра). Если в вашем случае требуется указать точную длину, вам нужны абсолютные единицы измерения. Например, это подходит для элементов, размер которых не должен меняться. Также абсолютные единицы могут быть полезны, если вы хотите определить ограничения для каких-то областей, чтобы они не могли стать слишком широкими или слишком узкими. Те элементы, размеры которых вы задаете в абсолютных величинах, не меняются в зависимости от размеров экрана, ориентации в пространстве и прочих вещей.

  • cm – сантиметры. 1 cm = 1 cm
  • mm – миллиметры. 10 mm = 1 cm
  • in – дюймы (inches). 1 in = 96px = 2.54 cm
  • px – пиксели. 1 px = 1/96 от 1 in
  • pt – поинты (points). 1 pt = 1/72 от 1 in
  • pc – пайки (пики, англ. pica). 1pc = 12 pt

See the Pen CSS Absolute Units by Matthias (@fullstack-to) on CodePen.

Единицы измерения области просмотра (viewport-единицы)

Viewport-единицы представляют собой процентное отношение к текущей величине области просмотра браузера. От простого выражения в процентах viewport-единицы отличаются тем, что они всегда высчитываются на основе текущего размера области просмотра. А размер, выраженный просто в процентах, вычисляется по отношению к родительскому элементу.

  • vw – 1% от ширины области просмотра (50% это половина ширины области просмотра).
  • vh – 1% от высоты области просмотра (50% это половина высоты области просмотра).
  • vmin – 1% от меньшего размера ширины или высоты области просмотра (т. е., если ширина меньше высоты, то vmin рассчитывается от ширины, при этом 1 vmin = 1 vw).
  • vmax – 1% от большего размера ширины или высоты области просмотра (т. е., если высота больше ширины, то vmax рассчитывается от высоты, при этом 1 vmax = 1 vh).

See the Pen Viewport Units by Matthias (@fullstack-to) on CodePen.

vmin и vmax могут изменяться в зависимости от изменения размера окна браузера или смены ориентации мобильного телефона.

— CSS: Каскадные таблицы стилей

Тип данных состоит из , за которым следует одна из единиц, перечисленных ниже. Как и во всех измерениях CSS, между литералом единицы измерения и числом нет пробела. Единица длины не обязательна после числа 0 .

Примечание: Некоторые свойства допускают отрицательное значение <длина> с, а другие — нет.

Единицы

Единицы относительной длины

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

Относительная длина шрифта

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

Примечание: Эти единицы, особенно em и rem , часто используются для создания масштабируемых макетов, которые поддерживают вертикальный ритм страницы, даже когда пользователь изменяет размер шрифта.

cap Это экспериментальный API, который не следует использовать в производственном коде.
Представляет «высоту шапки» (номинальную высоту заглавных букв) шрифта элемента .
шасси
Представляет ширину или, точнее, предварительную меру глифа «0» (ноль, символ Юникода U + 0030) в шрифте элемента .

В случаях, когда невозможно или непрактично определить размер символа «0», он должен быть принят равным 0.5em шириной на 1em высотой.

выс.
Представляет рассчитанный размер шрифта элемента. Если используется в самом свойстве font-size , оно представляет унаследованный размер шрифта элемента.
из
Представляет высоту по оси x шрифта элемента . В шрифтах с буквой «x» это обычно высота строчных букв шрифта; 1ex ≈ 0.5em во многих шрифтах.
ic Это экспериментальный API, который не следует использовать в производственном коде.
Равно использованной предварительной мере глифа «水» (идеограмма воды CJK, U + 6C34), найденного в шрифте, используемом для его визуализации.
lh Это экспериментальный API, который не следует использовать в производственном коде.
Равно вычисленному значению свойства line-height элемента, в котором оно используется, преобразованному в абсолютную длину.
рем
Представляет размер шрифта корневого элемента (обычно ).При использовании в корневом элементе font-size он представляет его начальное значение (обычное значение по умолчанию для браузера 16px , но пользовательские настройки могут это изменить).
rlh Это экспериментальный API, который не следует использовать в производственном коде.
Равно вычисленному значению свойства line-height корневого элемента (обычно ), преобразованному в абсолютную длину. При использовании в свойствах корневого элемента font-size или line-height , это относится к начальному значению свойств.
Длина окна просмотра в процентах

Процентная длина области просмотра определяет значение относительно размера области просмотра, то есть видимой части документа. Длины области просмотра недопустимы в блоках объявлений @page .

vh
Равно 1% высоты исходного содержащего блока области просмотра.
VW
Равно 1% ширины исходного содержащего блока области просмотра.
vi Это экспериментальный API, который не следует использовать в производственном коде.
Равно 1% от размера исходного содержащего блока в направлении внутренней оси корневого элемента.
vb Это экспериментальный API, который не следует использовать в производственном коде.
Равно 1% от размера исходного содержащего блока в направлении оси блока корневого элемента.
vmin
Равно меньшему из vw и vh .
vmax
Равно большему из vw и vh .
Единицы абсолютной длины

Абсолютные единицы длины представляют собой физическое измерение, когда известны физические свойства выходного носителя, например, для макета печати. Это делается путем привязки одной из единиц к физической единице, а затем определения других относительно нее. Привязка выполняется по-разному для устройств с низким разрешением, таких как экраны, и для устройств с высоким разрешением, таких как принтеры.

Для устройств с низким dpi единица пикселей представляет физический опорный пиксель ; другие единицы определены относительно него. Таким образом, 1 из определяется как 96 пикселей , что равно 72 пикселя . Следствием этого определения является то, что на таких устройствах размеры, описанные в дюймах ( из ), сантиметрах ( см ) или миллиметрах ( мм ), не обязательно соответствуют размеру физического устройства с тем же именем. .

Для устройств с высоким dpi дюймы ( на ), сантиметры ( см, ) и миллиметры ( мм, ) совпадают с их физическими аналогами.Следовательно, относительно них определяется блок пикселей (1/96 1 дюйма).

Примечание: Многие пользователи увеличивают размер шрифта своего пользовательского агента по умолчанию, чтобы текст был более разборчивым. Абсолютные длины могут вызвать проблемы с доступностью, поскольку они фиксированы и не масштабируются в соответствии с пользовательскими настройками. По этой причине при установке размера шрифта предпочтительнее относительная длина (например, em или rem ).

пикселей
Один пиксель.Для экранных дисплеев он традиционно представляет собой один пиксель устройства (точку). Однако для принтеров и с экранами с высоким разрешением один пиксель CSS подразумевает несколько пикселей устройства. 1px = 1/96 от 1 дюйм .
см
Один сантиметр. 1 см = 96 пикселей / 2,54 .
мм
Один миллиметр. 1 мм = 1/10 от 1 см .
Q Это экспериментальный API, который не следует использовать в производственном коде.
Одна четверть миллиметра. 1 квартал = 1/40 от 1 см .
дюйм
Один дюйм. 1 дюйм = 2,54 см = 96 пикселей .
шт
One pica. 1 шт. = 12 точек = 1/6 от 1 дюйм .
пт
Одно очко. 1 точка = 1/72 часть 1 дюйм .
mozmm ​​ Этот API не стандартизирован., удалено в Firefox 59
Экспериментальный блок, который пытается визуализировать ровно один миллиметр независимо от размера или разрешения дисплея. На самом деле это редко бывает тем, что вам нужно, но может быть полезно, в частности, для мобильных устройств.

При анимации значения типа данных интерполируются как действительные числа с плавающей запятой. Интерполяция происходит по рассчитанному значению. Скорость интерполяции определяется функцией синхронизации, связанной с анимацией.

Сравнение единиц длины

Следующая демонстрация предоставляет вам поле ввода, в которое вы можете ввести значение (например, 300px , 50% , 30vw ), чтобы установить ширину результата полоса, которая появится под ней после того, как вы нажмете Возврат .

Это позволяет сравнивать и противопоставлять эффект различных единиц длины.

HTML
CSS 
  html {
  семейство шрифтов: без засечек;
  font-weight: жирный;
  размер коробки: рамка-рамка;
}

.external {
  ширина: 100%;
  высота: 50 пикселей;
  цвет фона: #eee;
  положение: относительное;
}

.внутренний {
  высота: 50 пикселей;
  цвет фона: # 999;
  box-shadow: вставка 3px 3px 5px rgba (255,255,255,0,5),
              вставка -3px -3px 5px rgba (0,0,0,0.5);
}

.результат {
  высота: 20 пикселей;
  цвет фона: # 999;
  box-shadow: вставка 3px 3px 5px rgba (255,255,255,0,5),
              вставка -3px -3px 5px rgba (0,0,0,0.5);
  цвет фона: оранжевый;
  дисплей: гибкий;
  align-items: center;
  маржа сверху: 10 пикселей;
}

.result code {
  позиция: абсолютная;
  маржа слева: 20 пикселей;
}

.полученные результаты {
  маржа сверху: 10 пикселей;
}

.input-container {
  позиция: абсолютная;
  дисплей: гибкий;
  justify-content: гибкий старт;
  align-items: center;
  высота: 50 пикселей;
}

метка {
  маржа: 0 10px 0 20px;
}
JavaScript 
  константа inputDiv = document.querySelector ('. Inner');
const inputElem = document.querySelector ('ввод');
const resultsDiv = document.querySelector ('. результаты');

inputElem.addEventListener ('изменить', () => {
  inputDiv.style.width = inputElem.value;

  const результат = документ.createElement ('div');
  result.className = 'результат';
  result.style.width = inputElem.value;
  result.innerHTML = ` width: $ {inputElem.value} `;
  resultsDiv.appendChild (результат);

  inputElem.value = '';
  inputElem.focus ();
})
Результат
Спецификация Статус Комментарий
Значения и единицы CSS Уровень модуля 4
Определение «<длина>» в этой спецификации.		 Черновик редакции Добавляет блоки vi , vb , ic , lh и rlh .
Значения и единицы CSS Уровень модуля 3
Определение «<длина>» в этой спецификации. 		Кандидат в рекомендации Добавляет каналов , rem , vw , vh , vmin , vmax и Q .
CSS Level 2 (Revision 1)
Определение «» в этой спецификации. 		Рекомендация Явное определение единиц em , pt , pc и px .
Уровень CSS 1
Определение «<длина>» в этой спецификации. 		Рекомендация Первоначальное определение. Неявное определение блоков em , pt , pc и пикселей .

таблицы BCD загружаются только в браузере

CSS Viewport Units: A Quick Start

Прошло несколько лет с тех пор, как единицы viewport были впервые представлены в CSS. Они действительно являются «адаптивными единицами длины» в том смысле, что их значение меняется каждый раз при изменении размера браузера. Если вы слышали об этих устройствах раньше, но никогда не слышали о них подробно, эта статья может вам помочь.

Единицы и их значение

В CSS есть четыре модуля на основе области просмотра.Это vh , vw , vmin и vmax .

  • Высота видового экрана (vh). Эта единица измерения зависит от высоты области просмотра. Значение 1vh равно 1% высоты области просмотра.
  • Ширина видового экрана (vw). Эта единица измерения зависит от ширины области просмотра. Значение 1vw равно 1% ширины области просмотра.
  • Минимум области просмотра (vmin). Этот блок основан на меньшем размере окна просмотра .Если высота области просмотра меньше ширины , значение 1vmin будет равно 1% высоты области просмотра. Аналогично, если ширина области просмотра меньше высоты , значение 1vmin будет равно 1% ширины области просмотра.
  • Максимум области просмотра (vmax). Этот блок основан на увеличенном размере окна просмотра . Если высота области просмотра больше ширины , значение 1vmax будет равно 1% высоты области просмотра.Аналогично, если ширина области просмотра больше высоты , значение 1vmax будет равно 1% ширины области просмотра hte.

Давайте посмотрим, какой будет стоимость этих единиц в разных ситуациях:

  • Если область просмотра имеет ширину 1200 пикселей и высоту 1000 пикселей, значение 10vw будет 120 пикселей, а значение 10vh будет 100 пикселей. Поскольку ширина области просмотра больше, чем ее высота, значение 10vmax будет 120 пикселей, а значение 10vmin будет 100 пикселей.
  • Если теперь устройство повернуть так, чтобы область просмотра стала шириной 1000 пикселей и высотой 1200 пикселей, значение 10vh будет 120 пикселей, а значение 10vw будет 100 пикселей. Интересно, что значение 10vmax по-прежнему будет 120 пикселей, потому что теперь оно будет определяться на основе высоты области просмотра. Точно так же значение 10vmin все равно будет 100 пикселей.
  • Если вы измените размер окна браузера так, чтобы область просмотра стала шириной 1000 пикселей и высотой 800 пикселей, значение 10vh станет 80 пикселей, а значение 10vw станет 100 пикселей.Аналогично, значение 10vmax станет 100 пикселей, а значение 10vmin станет 80 пикселей.

На этом этапе единицы просмотра могут показаться похожими на проценты. Однако они совсем другие. В случае процентов ширина или высота дочернего элемента определяется по отношению к его родительскому элементу. Вот пример:

Как видите, ширина первого дочернего элемента установлена ​​равной 80% ширины его родительского элемента. Однако второй дочерний элемент имеет ширину 80vw, что делает его шире, чем его родительский.

Приложения единиц просмотра

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

Полноэкранные фоновые изображения или разделы

Очень часто фоновые изображения устанавливаются на элементы, которые полностью закрывают экран. Точно так же вы можете создать веб-сайт, где каждый отдельный раздел о продукте или услуге должен занимать весь экран.В таких случаях вы можете установить ширину соответствующих элементов равной 100% и установить их высоту равной 100vh.

В качестве примера возьмем следующий HTML-код:

  

  
 а

Вы можете получить полноразмерный раздел фонового изображения, используя приведенный ниже CSS:

  .fullscreen {
  ширина: 100%;
  высота: 100vh;
  набивка: 40vh;
}

.a {
  фон: url ('path / to / image.jpg') center / cover;
}

И первое, и второе изображение взяты с Pixabay.

Создавайте идеально подходящие заголовки

Плагин FitText jQuery можно использовать для масштабирования заголовков таким образом, чтобы они занимали всю ширину родительского элемента. Как мы упоминали ранее, значение единиц области просмотра изменяется непосредственно в зависимости от размера области просмотра. Это означает, что если вы используете единицы просмотра, чтобы установить размер шрифта для заголовков, они идеально впишутся на экран. При изменении ширины области просмотра браузер также автоматически масштабирует текст заголовка соответствующим образом.Единственное, что вам нужно сделать, это определить правильное начальное значение для font-size в единицах области просмотра.

Одна из основных проблем с установкой font-size таким образом заключается в том, что размер текста будет сильно различаться в зависимости от области просмотра . Например, font-size из 8vw будет вычисляться примерно до 96 пикселей для ширины области просмотра 1200 пикселей, 33 пикселей для ширины области просмотра 400 пикселей и 154 пикселей для ширины области просмотра 1920 пикселей. Это может сделать шрифт слишком большим или слишком маленьким для правильного чтения.Вы можете узнать больше о правильном изменении размера текста с помощью комбинации единиц вместе с функцией calc () в этой отличной статье о типографике на основе единиц просмотра.

Простое центрирование элементов

единиц просмотра могут быть очень полезны, когда вы хотите поместить элемент точно в центр экрана вашего пользователя. Если вы знаете высоту элемента, вам просто нужно установить верхнее и нижнее значение свойства margin равным [(100 - height) / 2] vh :

.
 .centered {
  ширина: 60вв;
  высота: 70vh;
  наценка: 15вх авто;
}

Однако в настоящее время мы можем использовать Flexbox или CSS Grid для центрирования элементов как по вертикали, так и по горизонтали.

О чем нужно помнить

Если вы решите использовать единицы просмотра в своих проектах, вам следует помнить о нескольких вещах.

Будьте осторожны при установке ширины элемента с помощью единиц просмотра. Это связано с тем, что, когда для свойства overflow корневого элемента установлено значение auto , браузеры предполагают, что полосы прокрутки не существуют.Это сделает элементы немного шире, чем вы ожидаете. Рассмотрим разметку с четырьмя элементами div со следующим стилем:

  div {
  высота: 50vh;
  ширина: 50вв;
  плыть налево;
}

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

Установка ширины div от 50vw до 50% решит эту проблему. Вывод состоит в том, что вы должны использовать проценты при установке ширины для элементов блока , чтобы полосы прокрутки не мешали вычислению их ширины.

Аналогичная проблема также может возникать на мобильных устройствах из-за адресной строки, которая может появляться или исчезать в зависимости от того, прокручивает пользователь или нет. Это изменит высоту области просмотра, и пользователь заметит внезапные скачки при просмотре контента.

Поддержка браузера

Судя по данным, доступным на Caniuse, кажется, что все основные браузеры поддерживают эти устройства. Однако есть еще несколько ошибок и проблем, о которых вам следует знать при использовании единиц просмотра. Например, в Firefox есть задокументированная ошибка, при которой 100vh не влияет ни на один элемент, если для свойства display установлено значение table . Опять же, Chrome не поддерживает единицы просмотра для ширины границ, промежутков между столбцами, значений преобразования, теней блоков или в calc () до версии 34.Посетите Caniuse для получения полного списка известных ошибок.

Заключение

В этой статье мы кратко рассмотрели значение, приложения и поддержку единиц просмотра в браузере. Если вы знаете о какой-либо другой интересной проблеме с приложением или браузером, связанной с этими устройствами, почему бы не рассказать нам о них на форумах.

Поднимите свои навыки CSS на новый уровень с помощью нашей книги «Мастер CSS, 2-е издание» Тиффани Б. Браун, в которой рассматриваются CSS-анимации, переходы, преобразования и многое другое.

CSS em, rem, vh, vw и другие, объяснено

Единицы

Многие свойства CSS, такие как ширина , поле , отступ , размер шрифта и т. Д., Принимают длину. В CSS есть способ выразить длину в нескольких единицах. Длина — это комбинация числа и единицы без пробелов. Например. 5px , 0.9em и т. Д.

Длина
Единицы общей длины

CSS использует несколько единиц для выражения длины.Старые версии, поддерживаемые всеми браузерами:

  • rem — «r» означает «root»: «root em» — что равно размеру шрифта, установленному для корневого элемента (почти всегда ).
  • vh и vw — Многие методы адаптивного веб-дизайна в значительной степени полагаются на процентные правила. Однако процентные показатели CSS не всегда являются лучшим решением всех проблем. Размер vh равен 1/100 высоты области просмотра.Так, например, если высота браузера составляет 800 пикселей, 1vh равняется 8 пикселей и, аналогично, если ширина области просмотра составляет 650 пикселей, 1vw эквивалентно 6,5 пикселей.
  • vmin и vmax — Эти единицы связаны с максимальным или минимальным значением vh и vw . Например, если ширина браузера установлена ​​на 1200 пикселей, а высота — 600 пикселей, 1vmin будет 6 пикселей, а 1vmax будет 12 пикселей. Однако, если ширина была установлена ​​на 700 пикселей, а высота установлена ​​на 1080 пикселей, vmin будет равно 7px, а vmax 10.8 пикселей.
  • ex и ch — Эти единицы, аналогичные em и rem , зависят от текущего шрифта и размера шрифта. Однако, в отличие от em и rem , эти единицы также полагаются на семейство шрифтов , поскольку они определяются на основе мер, специфичных для каждого шрифта. Единица ch («символьная единица») определяется как ширина нулевого символа («0»).Единица ex определяется как «текущая высота x текущего шрифта или половина 1em». Высота-x данного шрифта — это высота строчной буквы «x» этого шрифта. Часто это средний знак шрифта.

Существует два основных типа единиц длины и размера в CSS: относительные и абсолютные.

Относительные единицы

Относительные единицы изменяются относительно текущего размера шрифта элемента или других настроек. Некоторые относительные единицы:

em

  • ширина заглавной буквы M font-size текущего элемента.
  • Размеры шрифта наследуются от родительских элементов.

Пример:

  div {
размер шрифта: 16 пикселей;
}
div h4 {
размер шрифта: 2rem;
}

Здесь

будет равно 32px , поскольку размер шрифта текущего или родительского элемента равен 16px .

rem

  • root em , или ширина заглавной буквы M по умолчанию font-size .
  • Размеры родительского шрифта не действуют.

Пример:

  body {
размер шрифта: 16 пикселей;
}
п {
размер шрифта: 1,5 бэр;
}

Здесь

будет равно 24px , поскольку базовый размер шрифта по умолчанию равен 16px .

%

  • размер в процентах относительно размера родителя.

Пример:

  div {
ширина: 400 пикселей;
}
div p {
ширина: 75%;
}

Поскольку ширина родительского элемента равна 400 пикселей , ширина внутреннего парграфа будет 300 пикселей , или 75% от 400 пикселей .

vw

  • ширина обзора, или 1/100 ширины области просмотра

Пример:

  body {
ширина: 100ввт;
}

Тело заполняет ширину области просмотра, будь то 417 пикселей, 690 пикселей или любая другая ширина.

vh

  • высота обзора, или 1/100 высоты окна просмотра

Пример:

  div {
высота: 50vh;
}

Этот div заполнит половину высоты области просмотра, будь то 1080 пикселей, 1300 пикселей или любая другая высота.

Абсолютные единицы

Абсолютные единицы будут одинаковыми независимо от размера экрана или других настроек. Некоторые абсолютные единицы:

пикселей

  • пиксель
  • количество пикселей относительно качества экрана устройства просмотра

дюймов , см , мм

  • дюйм,
    • миллиметр, миллиметр
  • дюйм — это дюйм на маленьком или большом экране

pt , pc

  • точка (1/72 дюйма) и picas (12 точек)

Пример

  p {
  размер шрифта: 24 пикселя;
}
div {
  ширина: 3 дюйма;
  ширина границы: 3pt;
}

Абзац с размером шрифта : 24px будет отображаться как 24px на экране телефона, планшета или рабочего стола.

div будет отображаться как 3 дюйма шириной, а граница на div будет иметь толщину 3/72 дюйма, независимо от размера экрана.

Vh и vw: как и зачем использовать их в Webflow

Путешествуя по сети, вы, возможно, видели некоторые сайты с типографикой, которая прекрасно масштабируется при изменении размера окна браузера. Или полноэкранные разделы, которые остаются неизменными независимо от размера окна просмотра.

Вот несколько примеров из CodePen:

Вот простой пример, который я построил в Webflow: http: // vh-and-vw.webflow.io/

Теперь «старой школой» настройки размеров элементов и шрифтов были значения ширины и высоты в пикселях. Попробуйте использовать пиксели для установки высоты и ширины сейчас, и вы увидите, как часто трясутся головы.

У современных устройств так много разных размеров экрана, что очень важно разрабатывать каждый веб-макет с учетом максимальной гибкости. Точно так же простое изменение размера окна не должно сбивать пользователя с толку из-за нечитаемого текста. Пользователи все чаще ожидают, что веб-сайты не только будут хорошо работать, но и будут обеспечивать полностью приятный эстетический опыт независимо от устройства.Элегантно масштабируемая типографика — это один из способов обеспечить пользователям удобство при каждом посещении вашего сайта.

Чтобы добиться реальной скорости отклика, вам нужно начать думать не только об абсолютных или фиксированных единицах длины. Переход к относительным единицам для выражения длины и использование настроек стиля vh и vw позволяет управлять шириной и высотой элементов независимо от размера области просмотра.

Вы также можете использовать процентные единицы, но имейте в виду, что они основаны на родительском элементе, а единицы стиля vh и vw основаны на области просмотра.

Модули

Vh и vw идеально подходят для адаптивного дизайна, поскольку они полностью независимы от основного размера шрифта.

vh и vw определены

vw и vh — это единицы длины, представляющие 1% размера области просмотра для ширины (vw) и высоты (vh) соответственно.

Хотите знать, какие браузеры поддерживают vh и vw? Браузерная поддержка модулей vh и vw в целом хорошая — совместимы все новейшие основные версии браузеров. Проверьте, могу ли я использовать? на самое последнее!

vh и vw в действии

Вы можете легко настроить размер шрифта на основе vh и vw в Webflow.Чтобы использовать значения vh и vw, просто введите «Nvh» или «Nvw» (где «N» представляет процент области просмотра, которую вы хотите закрыть) в любое поле ширины или высоты.

Итак, чтобы покрыть 100% области просмотра, вы должны установить 100% для ширины и 100vh для высоты. Чтобы покрыть половину высоты области просмотра, вы должны установить высоту 50vh . Вы можете спросить, а почему бы не использовать 100vw для ширины? Ответ заключается в том, что стиль vw не учитывает ширину полосы прокрутки, это может вызвать боковую прокрутку в браузерах с широкими полосами прокрутки, таких как Internet Explorer.

Адаптивная типографика с vh и vw

Вы также можете использовать vh и vw в качестве размеров шрифта, чтобы масштабировать текст в соответствии с размером окна браузера. Это отличный способ сохранить нужный размер содержимого независимо от размера окна или области просмотра.

Вы уже используете vh и / или vw?

Если да, мы будем рады увидеть, что вы с ними сделали! Поделитесь своими ссылками ниже, в Twitter или Facebook.

В чем разница между PX, EM, REM,%, VW и VH?

При проектировании с помощью Elementor вы можете заметить, что у некоторых элементов есть параметры для выбора размера, позволяющие выбрать PX, EM, REM,%, VW, или VH .Но что на самом деле означают эти параметры и когда следует использовать один вместо другого?

Начнем с основ.

В CSS вы можете указать размеры или длину элементов, используя различные единицы измерения. Единицы измерения, которые вы найдете в некоторых вариантах Elementor, включают PX, EM, REM,%, VW и VH , хотя в CSS доступно несколько других. Не каждый элемент Elementor предлагает все эти единицы. Elementor представляет только те параметры, которые наиболее подходят для данного элемента.

Наиболее важным аспектом, который нужно знать о различных единицах измерения, является то, что некоторые единицы, такие как PX, являются абсолютными, а некоторые — относительными.

Абсолютные единицы

PX : пиксели (пиксели) считаются абсолютными единицами, хотя они относятся к DPI и разрешению устройства просмотра. Но на самом устройстве блок PX закреплен и не меняется ни на каком другом элементе. Использование PX может быть проблематичным для отзывчивых сайтов, но они полезны для поддержания согласованного размера некоторых элементов.Если у вас есть элементы, размер которых нельзя изменять, то хорошим выбором будет использование PX.

Относительные единицы

EM : относительно родительского элемента

REM : относительно корневого элемента (тег HTML)

% : относительно родительского элемента

VW : относительно ширины окна просмотра

VH : относительно высоты окна просмотра

В отличие от PX, относительные единицы, такие как%, EM и REM, лучше подходят для адаптивного дизайна, а также помогают соответствовать стандартам доступности.Относительные единицы лучше масштабируются на разных устройствах, поскольку их можно увеличивать и уменьшать в соответствии с размером другого элемента.

Рассмотрим простой пример.

В большинстве браузеров размер шрифта по умолчанию составляет 16 пикселей. Относительные единицы рассчитывают размер от этой базы. Если вы измените эту базу, установив базовый размер для HTML-тега с помощью CSS, тогда он станет основой для вычисления относительных единиц на всей остальной странице. Аналогичным образом, если пользователь изменяет размер шрифта, это становится основой для вычисления относительных единиц.

Итак, что означают эти единицы при работе со значением по умолчанию 16 пикселей?

Указанное вами число умножит это число на размер по умолчанию.

1em = 16 пикселей (1 * 16)

2em = 32 пикселя (2 * 16)

. 5em = 8 пикселей (0,5 * 16)

1рем = 16 пикселей

2rem = 32 пикс.

.5rem = 8px

100% = 16 пикселей

200% = 32 пикс.

50% = 8 пикселей

Хорошо, отлично, но что, если вы или пользователь измените размер по умолчанию? Поскольку это относительные единицы, окончательные значения размера будут основаны на новом базовом размере.Хотя значение по умолчанию — 16 пикселей, если вы или пользователь измените его на 14 пикселей, то рассчитанные размеры будут равны:

.

1em = 14 пикселей (1 * 14)

2em = 28 пикселей (2 * 14)

. 5em = 7 пикселей (0,5 * 14)

1рем = 14 пикселей

2rem = 28 пикселей

.5rem = 7px

100% = 14 пикселей

200% = 28 пикселей

50% = 7 пикселей

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

В чем разница между EM и REM?

Глядя на диаграмму выше, видно, что EM и REM выглядят совершенно одинаково. Так чем же они отличаются?

Проще говоря, они различаются по наследству. Как уже упоминалось, REM основан на корневом элементе (HTML). Каждый дочерний элемент, который использует REM, будет затем использовать корневой размер HTML в качестве точки вычисления, независимо от того, заданы ли для родительского элемента какие-либо другие размеры.

EM, с другой стороны, основан на размере шрифта родительского элемента.Если размер родительского элемента отличается от размера корневого элемента, расчет EM будет основан на родительском элементе, а не на корневом элементе. Это означает, что вложенные элементы, которые используют EM для определения размеров, иногда могут иметь размер, которого вы не ожидали. С другой стороны, он дает вам более детальный контроль, если вам нужно указать размер определенной области страницы.

Так что насчет%, VW и VH? О чем они все?

В то время как PX, EM и REM в основном используются для изменения размера шрифта,%, VW и VH в основном используются для полей, отступов, интервалов и ширины / высоты.

Повторюсь, VH означает «высота области просмотра», которая является видимой высотой экрана. 100VH будет представлять 100% высоты области просмотра или полную высоту экрана. И, конечно же, VW означает «ширина области просмотра», то есть видимая ширина экрана. 100VW будет представлять 100% ширины области просмотра или полную ширину экрана. % отражает процентную долю размера родительского элемента, независимо от размера области просмотра.

Давайте посмотрим на несколько примеров, когда Elementor предоставляет параметры%, VW и VH.

Ширина столбца : Если вы редактируете макет столбца Elementor, вы заметите, что доступна только одна единица измерения ширины -%. Ширина столбцов работает хорошо и гибко только при использовании процентов, поэтому других вариантов не предусмотрено.

Поля : Поля раздела могут быть указаны в формате PX или%. Использование% обычно предпочтительнее, чтобы поля не превышали размер содержимого, например, при уменьшении масштаба для мобильного устройства. При использовании процента от ширины устройства ваши поля останутся относительно размера содержимого, что почти всегда предпочтительнее.

Padding : заполнение раздела может быть указано в PX, EM или%. Как и в случае с полями, часто предпочтительнее использовать либо EM, либо%, чтобы отступы оставались относительными по мере увеличения размера страницы.

Размер шрифта : если вы измените типографику элемента, например заголовка, вы увидите четыре варианта: PX, EM, REM и VH

.

Вы когда-нибудь создавали большой заголовок и восхищались тем, как хорошо он выглядит на настольном компьютере, только чтобы понять, что он слишком велик на мобильном устройстве? (Признание вины: неоднократно).

Ключом к элегантному решению этой проблемы является использование EM, REM или VW вместо PX. Что вы выберете, зависит от вашей конкретной ситуации. Я обычно выбираю EM, потому что хочу, чтобы размер был относительно родительского заголовка. Но если вы предпочитаете, чтобы размер был относительно размера корня (HTML), выберите вместо этого REM. Или вы можете установить его относительно ширины области просмотра (VW), если это лучше для вашего случая.

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

Подробнее о VW и VH

Единицы окна просмотра представляют собой процент от текущего окна просмотра браузера (текущий размер браузера). Хотя это похоже на единицы измерения%, есть разница. Единицы области просмотра рассчитываются как процент от текущего размера области просмотра браузера. С другой стороны, процентные единицы рассчитываются как процент от родительского элемента, который может отличаться от размера области просмотра.

Рассмотрим пример области просмотра мобильного экрана размером 480 x 800 пикселей.

1 VW = 1% ширины области просмотра (или 4,8 пикселя)

50 VW = 50% ширины области просмотра (или 240 пикселей)

1 VH = 1% высоты области просмотра (или 8 пикселей)

50 VH = 50% высоты области просмотра (или 400 пикселей)

Если размер области просмотра изменяется, размер элемента изменяется соответственно.

Когда следует использовать одно устройство вместо другого?

В конце концов, на этот вопрос нет идеального ответа.В общем, часто лучше выбрать одну из относительных единиц вместо PX, чтобы ваша веб-страница имела наилучшие шансы на рендеринг красивого адаптивного дизайна. Однако выберите PX , если вам нужно гарантировать, что размер элемента никогда не изменится ни в одной точке останова и останется неизменным независимо от того, выбрал ли пользователь другой размер по умолчанию. Устройства PX обеспечивают стабильные результаты, даже если они не идеальны.

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

REM относится к размеру шрифта корневого (HTML), поэтому, если вы хотите масштабировать размер элемента на основе размера корня, независимо от размера родительского элемента, используйте REM. Если вы использовали EM и обнаружили проблемы с размером из-за большого количества вложенных элементов, REM, вероятно, будет лучшим выбором.

VW полезен для создания элементов полной ширины (100%), заполняющих всю ширину области просмотра. Конечно, вы можете использовать любой процент ширины области просмотра для достижения других целей, например, 50% для половины ширины и т. Д.

VH полезен для создания элементов полной высоты (100%), которые заполняют всю высоту области просмотра. Конечно, вы можете использовать любой процент высоты окна просмотра для достижения других целей, например, 50% для половины высоты и т. Д.

% похож на VW и VH, но его длина не связана с шириной или высотой области просмотра. Вместо этого это процент от ширины или высоты родительского элемента. Например, процентные единицы часто используются для установки ширины полей.

Elementor позволяет легко выбрать вариант, который лучше всего подходит для вашего дизайна. В конце концов, это ваш выбор.

Vmin CSS: единицы измерения в CSS (em, rem, pt, px, vw, vh, vmin, vmax, ex, ch, …)

CSS знает несколько единиц измерения. Самая известная единица измерения — пиксели, но есть и другие единицы, которые не так популярны, но очень удобны в некоторых случаях использования.

В этой статье рассматриваются относительные единицы, абсолютные единицы и единицы области просмотра.

СМИ рекомендуется Редкое использование Редкое использование Не рекомендуется
Экран em, rem,% пикселей шасси, пр, vw, vh, vmin, vmax см, мм, дюйм, пт, шт
Печать em, rem,% см, мм, дюйм, пт, шт шасси, ex пикселей, vw, vh, vmin, vmax

Относительные единицы

В отличие от абсолютных единиц, таких как пиксели, точки или сантиметры, вы также можете определять размеры в относительных единицах, таких как процент, em или rem.
Относительные единицы также соответствуют стандартам доступности.
В большинстве браузеров размер шрифта по умолчанию 16 пикселей , вы можете использовать это значение в качестве основы для вычислений (например, 16 пикселей равно 1em, 1rem или 100%).

Установка Описание
% процентов
до размер шрифта элемента (например, 2,5em означает, что шрифт в 2,5 раза больше обычного шрифта)
рем размер шрифта корневого элемента документа
шасси ширина символа «0» в монохромных шрифтах, где все символы имеют одинаковую ширину, 1 канал равен 1 символу
из x-высота текущего шрифта, измеренная на высоте нижнего регистра x

В чем разница между em и rem?

Отличие заключается в наследовании.Значение rem основано на корневом элементе ( html ). Каждый дочерний элемент использует размер шрифта html в качестве основы для расчета.

em , с другой стороны, зависит от размера шрифта родительского элемента.

rem значительно упрощает расчет размера шрифта. При использовании вложенных элементов или даже нескольких вложенных элементов (например, списков) размер шрифта больше не нужно рассчитывать по отношению к размеру шрифта родительского элемента. rem всегда вычисляет размер шрифта относительно тега html .

Различные семейства шрифтов

Все шрифты имеют одинаковый размер (18 пунктов), но красная полоса указывает на то, что высота по оси x ( ex ) у шрифтов разная.

Шрифты снова того же размера (18pt). На этом графике сравнивается ширина символа ( ch ). Моноблочные шрифты имеют одинаковую ширину для каждого символа, тогда как шрифты с засечками или без засечек могут иметь разную ширину для каждого символа ( и уже, чем или ).

Абсолютные единицы

Абсолютные единицы фиксированы в его размере, длину сантиметра не обсудить. Если у вас есть случай, когда требуется точная длина, вы должны использовать абсолютные единицы (например, для компонентов, размер которых не следует изменять). Они также могут быть полезны, если вы хотите определить ограничения, чтобы области не стали слишком широкими или слишком узкими. Абсолютные единицы не меняются в зависимости от размера экрана, направления или других изменений.

Установка Описание
см см 1 см = 1 см
мм миллиметров 10 мм = 1 см
в дюймов 1 дюйм = 96 пикселей = 2.54 см
пикселей пикселей 1 пиксель = 1/96 от 1 из
пт. баллов 1 точка = 1/72 от 1 из
шт pica 1шт = 12 баллов

Единицы просмотра

Единицы окна просмотра представляют собой процент от текущего окна просмотра браузера.
Разница в единицах измерения в процентах заключается в том, что единицы окна просмотра всегда рассчитываются как процент от размера окна просмотра браузера.Тогда как процентные единицы наследуют размер своего родительского элемента.

Установка Описание
VW 1% ширины области просмотра (50% означает половину ширины области просмотра)
vh 1% высоты области просмотра (50% означает половину высоты области просмотра)
vmin 1% меньшего размера области просмотра (vw или vh)
vmax 1% большего размера области просмотра (vw или vh)

vmin и vmax может изменяться при изменении размера окна браузера или ориентации мобильного телефона.
vmin — это минимум между высотой или шириной окна просмотра в процентах, в зависимости от того, какой из них меньше.

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

Если вам нравится мой контент, вы можете подписаться на меня в Twitter ?! @fullstack_to

Изображение на обложке Уильяма Варби на Unsplash

Использование единиц просмотра CSS (vw, vh …) для размеров шрифта может быть непростым

Модули

окна просмотра CSS, такие как vw и vh , чрезвычайно полезны, поскольку они обеспечивают способ определения размеров объектов в соответствии с размерами окна просмотра текущего браузера.Их удобство заставляет заманчиво изменять размер всего, что с их помощью, включая текст: это означает меньше медиа-запросов с произвольными точками останова и совершенно единообразный внешний вид во всех окнах просмотра.

Но каковы последствия масштабирования всего, используя простые единицы области просмотра?

Пример

Рассмотрим эту простую веб-страницу, отображаемую в области просмотра шириной 1440 пикселей.

В этом примере размер шрифта определяется в корне документа с использованием vw , а все остальные элементы используют rem в качестве единицы длины, что в основном переводится как «использовать размер шрифта, определенный для для определения размера х .Таким образом, размеры большинства элементов на странице напрямую связаны с размером шрифта из . 

  html {
  размер шрифта: 1.5vw;
}

[...]

main> h2 {
  дисплей: встроенный блок;
  размер шрифта: 1,75 бэр;
  набивка: 1 бэр;
  цвет фона: черный;
  цвет белый;
}

main> p {
  размер шрифта: 1 бэр;
  высота строки: 1,25 бэр;
  обивка-дно: 1 бэр;
}
Войти в полноэкранный режимВыйти из полноэкранного режима

Исключение из правила, размер нашего основного контейнера содержимого равен vw , поэтому он всегда занимает 60% ширины области просмотра.

  main {
  ширина: 60вв;
  маржа: авто;
}
Войти в полноэкранный режимВыйти из полноэкранного режима

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

Вот та же веб-страница, отображаемая в области просмотра шириной 960 пикселей.

И снова во вьюпорте шириной 4800 пикселей.

Проблема №1: функция масштабирования браузера больше не работает

Чтобы смоделировать различные размеры области просмотра, я просто использовал функцию увеличения / уменьшения масштаба Firefox.Хотя это доказало мою точку зрения о том, что все масштабируется без проблем, оно также высветило одну серьезную проблему: пользователь больше не может увеличивать текст, увеличивая масштаб!

Это, конечно, проблема удобства использования / доступности, которую мы хотим предотвратить. Такое поведение может быть «несколько нормально» , хотя, если каждая отдельная копия на экране очень большая, что здесь не так.

Проблема №2: изменение размера окна браузера влияет на удобочитаемость

Поскольку размер шрифта для всего основан на ширине области просмотра в этом примере, если я хочу разместить два окна бок о бок, уменьшив их ширину, я в конечном итоге все значительно сжимаю, и контент становится намного труднее читать .

Представьте себе на экране ноутбука 13 дюймов:

Это еще более проблематично, учитывая, что масштабирование браузера больше не работает!

Проблема №3: ​​на большом экране текст будет выглядеть массивно

На последнем из трех снимков экрана мое окно просмотра имеет ширину 4800 пикселей. На моем 13-дюймовом экране он по-прежнему выглядит отлично, но как насчет людей, просматривающих эту страницу на 32-дюймовом экране или больше?

Что ж, это будет выглядеть в точности так, как показано на скриншоте, но на огромном 32-дюймовом экране, со слишком большими символами и 19 контейнером содержимого.2 дюйма шириной! Если мы не хотим, чтобы некоторые из наших посетителей выглядели так, как будто они смотрят теннис, когда они читают наш контент, мы можем избежать этого.

Решение: на помощь приходят медиа-запросы!

В этом примере единственное место, где мы даем прямое значение font-size , — это определение стиля . Это очень удобно, потому что тогда мы могли бы просто использовать rem везде, чтобы ссылаться на этот font-size и масштабировать все, но это как раз и является причиной проблем, описанных выше.

Что, если нам нужна некоторая масштабируемость, но чтобы контент оставался читаемым почти во всех случаях, при этом функция масштабирования работает?

Первое, что мы могли бы сделать, это добавить медиа-запросов в , чтобы изменить значение font-size на основе различных параметров: текущая ширина области просмотра, высота области просмотра больше ширины области просмотра и т. Д.
Для этого мы все еще могли бы использовать vw , vh или даже vmax , и это, вероятно, сработает и обеспечит очень плавное масштабирование.Я лично предпочитаю писать меньше (и более простых) медиа-запросов, используя пикселей для размеров шрифта: используя здесь набор абсолютных значений вместо единиц окна просмотра, мне не нужно учитывать случаи, когда высота больше ширины, например.

Давайте изменим способ обработки в нашем примере font-size : 

  html {
  размер шрифта: 24 пикселя;
}

@media (max-width: 1921px) {
  html {
    размер шрифта: 22 пикселя;
  }
}

@media (max-width: 1441px) {
  html {
    размер шрифта: 20 пикселей;
  }
}

@media (max-width: 1025 пикселей) {
  html {
    размер шрифта: 18 пикселей;
  }
}
Войти в полноэкранный режимВыйти из полноэкранного режима

Прежде чем мы проверим это, давайте добавим еще одно правило: поскольку размер шрифта не будет масштабироваться так сильно, как раньше, и что мой контейнер содержимого по-прежнему составляет 60% ширины экрана, я не хочу, чтобы с очень длинными строками текста.

Чтобы исправить это, я могу использовать ch , чтобы ограничить максимальную ширину содержимого: 

  main {
  ширина: 60%;
  максимальная ширина: 70 каналов;
  маржа: авто;
}
Войти в полноэкранный режимВыйти из полноэкранного режима

Используя max-width: 70ch , я говорю браузеру : «Я хочу, чтобы размер

был не более чем в 70 раз больше, чем размер символа 0 текущего шрифта». , что примерно соответствует строкам длиной до 80 символов. (Подробнее о том, как это работает, см. В статье Эрика Мейера на ch)

Вот как это выглядит в окне просмотра шириной 1440 пикселей.

При 960 пикселей.

При 4800 пикселей (представьте это на сверхшироком экране)

И, наконец, в режиме «бок о бок» с «нечетными» размерами области просмотра . (я добавил простой медиа-запрос, чтобы контент занимал всю ширину области просмотра менее 768 пикселей)

Несколько медиа-запросов сделали свое дело: вещи больше не масштабируются так плавно, но они масштабируются правильно, и контент читается во всех случаях.

Заключение

Блоки просмотра

являются фантастическим дополнением к арсеналу CSS: они удобны и, наконец, сделали идею «сгиба» на странице на достижимой без использования единой строчки JavaScript.

No related posts.