Уроки по css: что такое единицы просмотра vw, vh, vmin и vmax

Настройка области просмотра

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

Для того, чтобы мобильные браузеры автоматически не изменяли размер страниц сайта, необходимо
в теге <head> разместить метатег, который сообщает браузеру, как обрабатывать размеры страницы и изменять ее масштаб:

<meta name = "viewport" content = "width=device-width, initial-scale = 1">

Атрибут name задает имя документа метаданным, значение «viewport» дает подсказку браузеру о размере начального размера области просмотра. Функция атрибута content задать значения для этого атрибута.
Значение width=device-width атрибута content сообщает, что ширина страницы устанавливается в соответствии с размером экрана устройства в аппаратно-независимых пикселях (device-independent pixel, dip), что позволяет странице пересчитывать положение элементов для корректного отображения на различных экранах. По аналогии допускается указать значения для высоты height=device-height.
Значение initial-scale=1 атрибута content сообщает браузеру, что необходимо установить соответствие 1:1 для пикселей CSS и аппаратно-независимых пикселей вне зависимости от ориентации устройства (альбомной или портретной).

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

Доступные значения:

Значение атрибута	Определение
width	Определяет ширину в пикселях области просмотра (значение — положительное целое число или device-width).
height	Определяет высоту в пикселях области просмотра (значение — положительное целое число или device-height).
initial-scale	Определяет соотношение между шириной устройства (device-width в портретном режиме или device-height в ландшафтном режиме) и размером области просмотра. Чем больше число, тем выше масштаб. Значение — положительное целое число от 0.0 до 10.0.
minimum-scale	Определяет минимальное значение zoom (оно должно быть меньше или равно maximum-scale). Значение — положительное целое число от 0.0 до 10.0.
maximum-scale	Определяет максимальное значение zoom (оно должно быть больше или равно minimum-scale). Значение — положительное целое число от 0.0 до 10.0.
user-scalable	Логическое значение, которое определяет, может ли пользователь увеличить масштаб веб-страницы. Значение по умолчанию yes (пользователь может увеличивать масштаб).

Что значит время отклика пикселя

Жидкокристаллические индикаторы состоят из ячеек, изменяющих свои характеристики под действием электрического сигнала. Например, яркость или цвет. Минимальное время, за которое происходит это переключение, называется временем отклика пикселя.

Эта характеристика определяет максимальную быстроту изменения картинки на экране.

Если время отклика дисплея t равно, например, 40 мм, то частоту смены изображения можно вычислить по формуле: f=1/t=25 Гц.

Большое время отклика пикселя плохо сказывается на зрении наблюдателя. Потому что изображение «не успевает» за сигналом. И на экране могут задерживаться старые образы на фоне уже возникающих новых. А в результате глаза и мозг переутомляются.

Для определения времени отклика дисплея существуют три способа:

BtB (BWB) — в переводе с английского: «черный в черный» (черный в белый). Показывает, за какой промежуток времени pixel меняет цвет из черного в белый, и назад, в черный.
BtW (Black to white) — время включения из состояния полного бездействия.
GtG — из серого в серый. Определяет, за сколько секунд элемент серого на девяносто процентов цвета станет десятипроцентным.

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

Самостоятельно измерить время отклика пикселя можно с помощью программы TFT Monitor Test.

vh и vw

rem — это не единственная новинка спецификации. Я бы хотел представить вам ещё несколько. vw и vh — единицы, которые отталкиваются от размеров области просмотра.

Давайте представим ситуацию. У нас на сайте присутствуют элементы, которые должны поместиться в область просмотра, причём, допустим, не полностью, а составлять 95% ширины и высоты окна. С помощью JavaScript мы могли бы высчитывать размеры окна, делать перерасчёт и подставлять эти данные в наш свойства нашего элемента. Но, это, во-первых, неудобно, постоянные перерасчёты при ресайзе окна, а во-вторых, само использование JavaScript для этих целей не самая лучшая затея. С помощью vw и vh мы можем вычислить размер элемента относительно области просмотра. Один vw равен 1/100 ширины всего экрана, а один vh соответственно 1/100 высоты. Для того, чтобы элемент занимал, например, всю ширину окна браузера, его ширине следует выставить 100vw.

Где бы это могло пригодится?

Ну, например, самое первое, что приходит на ум, это всплывающие попапы, типа Lightbox. Или, например, какие нибудь изображения в виде фона сайта, у которых должны быть определённые отступы от края окна.

А что с поддержкой браузеров?

Вот тут, к сожалению всё не так гладко, как нам хотелось бы. На данный момент, как это не удивительно, vw и vh поддерживает только лишь единственный браузер — Internet Explorer 9. Но, стоит надеется, что в ближайшем будущем этот удручающий факт начнёт меркнуть и мы с можем в полной мере насладиться этими единицами в любимых браузерах.

min(), max()

Функция возвращает минимальное из переданных значений, — максимальное. При использовании процентов или выбираемое значение будет динамическим и будет зависеть от внешних условий. Например:

Если поресайзить окно с примером, можно увидеть как это работает.

Если вычисленное значение для меньше , ширина блока будет равна . Как только станет больше , функция выберет меньшее значение, то есть , и дальше блок тянуться не будет.

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

Этот код не делает ничего особенного, что не умел бы CSS без математических функций: точно такое же поведение можно получить задав и :

Оба варианта для сравнения:

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

На первый взгляд, и не делают ничего интересного, но если подумать, как много мест в CSS, где можно управлять диапазоном значений?

Это доступно только для ширины и высоты:

и их аналогов, привязанных к направлению письма:

У нас нет, например, или , но благодаря математическим функциям, можно добавить умную динамику практически в любое значение. Например, в размер шрифта:

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

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

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

Размер тени будет зависеть от размера окна браузера, минимальное значение — .

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

Для такого есть ещё одна функция:

Functions

The final type of value we will take a look at is the group of values known as functions. In programming, a function is a reusable section of code that can be run multiple times to complete a repetitive task with minimum effort on the part of both the developer and the computer. Functions are usually associated with languages like JavaScript, Python, or C++, but they do exist in CSS too, as property values. We’ve already seen functions in action in the Colors section — , , etc. The value used to return an image from a file — — is also a function.

A value that behaves more like something you might find in a traditional programming language is the CSS function. This function gives you the ability to do simple calculations inside your CSS. It’s particularly useful if you want to work out values that you can’t define when writing the CSS for your project, and need the browser to work out for you at runtime.

For example, below we are using to make the box wide. The 20% is calculated from the width of the parent container and so will change if that width changes. We can’t do this calculation beforehand because we don’t know what 20% of the parent will be, so we use to tell the browser to do it for us.

Минимальные и максимальные значения ширины и высоты блочного элемента

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

CSS, помимо явного указания значений ширины и высоты элементов (свойства width и height) предлагает такие свойства, которые позволяют указать для блочных элементов их минимальные, либо максимальные значения:

min-width (устанавливает минимальную ширину элемента).
max-width (устанавливает максимальную ширину элемента).
min-height (устанавливает минимальную высоту элемента).
max-height (устанавливает максимальную высоту элемента).

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

<!DOCTYPE html>
<html>
<head>
	<title>Минимальная высота и максимальная ширина для блочных элементов</title>
<style> 
:root { /* псевдокласс :root определяет корневой элемент документа */
background-color: black; /* задаем цвет заднего фона */
}
html {
height:100%; /* задаем высоту элемента в процентах */
background-color: white; /* задаем цвет заднего фона */
}
body {
margin: 0 auto; /* задаем внешние отступы элемента (0 для верха и низа, автоматически слева и справа) */
max-width: 800px; /* задаем максимальную ширину элемента в пикселях */
height: 100%; /* задаем высоту элемента в процентах */
}
div {
min-height: 100%; /* задаем минимальную высоту элемента в процентах */
}
</style>
</head>
	<body>
		<div>
		</div>
	</body>
</html>

Какие приёмы CSS надо обязательно уяснить из этого примера:

Как установить высоту элемента 100% при любом разрешении?

Для начала мы должны установить для родителя элемента размер высоты 100%. В нашем случае необходимо установить 100% для элементов <html> и <body>, и только после этого мы устанавливаем для нашего блока размер минимальной высоты 100% (min-height). В итоге это приводит к тому, что у нас даже пустой блок растягивается на весь экран.
Как горизонтально центрировать страницу?

Для этого необходимо установить внешние отступы элемента сверху и снизу равными (нулю), а слева и справа установить как auto (автоматически):
```
margin: 0 auto;
```
В нашем случае мы центрируем страницу, используя такой стиль для элемента <body>.
Кроме того, мы указываем для элемента <body> максимальное значение ширины равной 800px (если разрешение экрана не будет вмещать 800px, то значение будет равно размеру экрана браузера (меньше этого числа), но элемент в котором установлен максимальный размер не может растянуться больше этого числа).
Например, если бы мы указали min-width: 100px, то это бы означало, что элемент не может быть меньше чем 100px (если экран будет меньше, то браузер добавит полосу прокрутки).
Как установить стиль, который будет приоритетней элемента <html>?

Псевдокласс :root, как и селектор типа html делают одно и тоже (выбирают одни и те же элементы), но псевдокласс :root обладает более высокой специфичностью (болеее значимый при определении стиля).
Вы можете использовать такой прием в будущем для установки изображений в качестве заднего фона. Подробное изучение работы с задним фоном мы рассмотрим далее в учебнике в статье «Работа с фоном элемента в CSS».

Результат нашего примера приведен на изображении ниже:

Рис. 106 Пример установки минимальной высоты и максимальной ширины для блочных элементов.

Скролл окна браузера

Сколлбар имеет несколько параметров: ширина, высота, значение прокрутки сверху, значение прокрутки слева.

Первые два параметра определяются свойствами и объекта . Это, опять же, справедливо только для режима следования стандартам.

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

Примечание на счет элементов я сделал не просто так: если какой-нибудь абсолютно позиционированный элемент будет «вылезать» за пределы , то он «растянет» ширину/высоту скролла, но размеры останутся прежними. Напротив, если размеры документа меньше, чем размеры вьюпорта — то значения и будут равны размерам документа, а не всего окна.

Стоит отметить, что как и в случае с размерами вьюпорта, в режиме «quirks mode» не всегда понятно, свойства какого элемента ( или ) будут иметь нужные нам значения скролла.

Для того, чтобы убедится в том, что в разных браузерах эти свойства имеют разные значения, можете попробовать выполнить тесты, представленные по этой ссылке, в разных браузерах: http://www.quirksmode.org/viewport/experiments/body.html

Для того, чтобы определить на сколько пикселей прокручен документ, нужно обратиться к свойствам и объекта , если браузер в режиме следования стандартам, или , если браузер в режиме «quirks mode».

var html = document.documentElement;
alert("Вы уже прокрутили "+ html.scrollTop +"px этой страницы");

В браузерах на движке Mozilla (Firefox) или WebKit (chrome, safari) вы можете воспользоваться свойствами и для определения этих значений. Они будут равны и соответственно.

Из скрипта вы можете управлять прокруткой страницы, пользуясь следующими методами (обратите внимание на очередность параметров):

// Изменить положение прокрутки к определенным значениям top и left:
window.scrollTo(<left>, <top>);

// Сместить положение прокрутки на определенные значения dtop и dleft
// (относительно текущих значений):
window.scrollBy(<dleft>, <dtop>);

// Сместить положение прокрутки на высоту lines строк документа:
window.scrollByLines(lines);

// Сместить положение прокрутки на высоту pages страниц документа
// Под страницей подразумевается высота видимой части документа
window.scrollByPages(pages);

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите следующие практические задания:

Практическое задание № 13 У нас имеются следующие стили, в которых элемент <body> и элементы <div>, имеют размер шрифта 150%:
```
body, div { /* создаем групповой селектор */
font-size: 150%; /* устанавливает размер шрифта 150% */
}
```
Сделаем следующую разметку:
```
<body>Текст внутри тела документа
	<div>Текст внутри блока
		<div>Текст внутри вложенного блока</div>
	</div>
</body>
```
Ответьте на следующие вопросы к практическому заданию:
- Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — <body>.
- Сколько в пикселях составляет размер шрифта текста, внутри блока <div>, вложенного в <body>.
- Сколько в пикселях составляет размер шрифта текста, вложенного внутри блока <div>, вложенного в другой блок <div>.
После того как Вы ответили на вопросы, самостоятельно составьте страницу с задачей и проинспектируйте её, чтобы убедиться, что Вы ответили правильно. Размер шрифта для элемента в инспекторе можно увидеть в полном перечне свойств для элемента (фильтр в хром, вычислено в мозила и так далее).
Практическое задание № 14 У нас имеются следующие стили, в которых элемент <body> и элементы <div>, имеют размер шрифта 1.5em:
```
body, div { /* создаем групповой селектор */
font-size: 1.5em; /* устанавливаем размер шрифта 1.5em */
}
```
Сделаем следующую разметку:
```
<body>Текст внутри тела документа
	<div>Текст внутри блока
		<div>Текст внутри вложенного блока</div>
	</div>
</body>
```
Ответьте на следующие вопросы к практическому заданию:
- Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — <body>.
- Сколько в пикселях составляет размер шрифта текста, внутри блока <div>, вложенного в <body>.
- Сколько в пикселях составляет размер шрифта текста, вложенного внутри блока <div>, вложенного в другой блок <div>.
После того как Вы ответили на вопросы, самостоятельно составьте страницу с задачей и проинспектируйте её, чтобы убедиться, что Вы ответили правильно. Размер шрифта для элемента в инспекторе можно увидеть в полном перечне свойств для элемента (фильтр в хром, вычислено в мозила и так далее).
Практическое задание № 15 У нас имеются следующие стили, в которых элемент <body> и элементы <div>, имеют размер шрифта 1.5rem:
```
body, div { /* создаем групповой селектор */
font-size: 1.5rem; /* устанавливаем размер шрифта 1.5rem */
}
```
Сделаем следующую разметку:
```
<body>Текст внутри тела документа
	<div>Текст внутри блока
		<div>Текст внутри вложенного блока</div>
	</div>
</body>
```
Ответьте на следующие вопросы к практическому заданию:
- Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — <body>.
- Сколько в пикселях составляет размер шрифта текста, внутри блока <div>, вложенного в <body>.
- Сколько в пикселях составляет размер шрифта текста, вложенного внутри блока <div>, вложенного в другой блок <div>.
После того как Вы ответили на вопросы, самостоятельно составьте страницу с задачей и проинспектируйте её, чтобы убедиться, что Вы ответили правильно. Размер шрифта для элемента в инспекторе можно увидеть в полном перечне свойств для элемента (фильтр в хром, вычислено в мозила и так далее).

Цветовое оформление в CSS

Форматирование текста в CSS

Кажется, вы используете блокировщик рекламы

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

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.

Как отключить?
Поддержать

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

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

Единица	Относительно чего измеряется
%	% от высоты шрифта родительского элемента
em	Высота шрифта текущего элемента (по умолчанию в браузерах обычно =16px)
rem	Размер шрифта корневого элемента
ex	Высота символа «x» шрифта элемента в нижнем регистре
ch	Ширина символа «0» (ZERO, U + 0030) в шрифте элемента
vw	1% ширины окна просмотра
vh	1% высоты окна просмотра
vmin	1% меньшего размера окна просмотра, т.е. меньшее значение из 1vw или 1vh.
vmax	1% большего размера окна просмотра, т.е. большее значение из 1vw или 1vh.

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

Начнем с настроек браузера и единицы rem (root em)

Это единица, соответствующая размеру «корневого» элемента, а именно — тега html. Для него не так часто задаются стили, поэтому размер берется из настроек браузера.

В каждом браузере есть настройки шрифтов по умолчанию. Посмотреть их в Хроме можно, нажав в меню «Настройки» на ссылку «расширенные настройки». В открывшемся окне задается тип шрифта по умолчанию для различных семейств шрифта (с засечками, без засечек и моноширинный), а также его размер. Чаще всего, это 16px. Именно он берется за «корневой» — «root» em — rem. От этого размера и рассчитывается единицы, указанные в rem.

В инспекторе свойств для выделенного абзаца со стилевым правилом

p {font-size: 1rem;}

1	p{font-size1rem;}

видно, что размер шрифта как раз составляет 16px.

Примечание: чтобы посмотреть размер шрифта, сделайте правый клик на элементе и из контекстного меню внизу выберите пункт «Просмотреть код». Либо нажмите клавишу F12 и стрелочкой в квадратике выберите нужный элемент на странице.

Если вы хотите переопределить этот размер, задайте размер шрифта для html:

html {font-size: 20px}

1	html{font-size20px}

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

body { font-size: 18px; }

1	body{font-size18px;}

Тем не менее, размер шрифта для абзаца с правилом , остался связанным с корневым элементом, и изменился до 20px:

Теперь он размером 20px. Т.е. соответствует размеру шрифта, заданному для html.

Примечание: Единица не поддерживается в браузере IE ниже 9-й версии.

Относительно шрифта: em

– текущий размер шрифта.

Можно брать любые пропорции от текущего шрифта: , и т.п.

Размеры в – относительные, они определяются по текущему контексту.

Например, давайте сравним с на таком примере:

пикселей – и в Африке пикселей, поэтому размер шрифта в одинаков.

А вот аналогичный пример с вместо :

Так как значение в высчитывается относительно текущего шрифта, то вложенная строка в раза больше, чем первая.

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

Что такое размер шрифта?

Что такое «размер шрифта»? Это вовсе не «размер самой большой буквы в нём», как можно было бы подумать.

Размер шрифта – это некоторая «условная единица», которая встроена в шрифт.

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

Единицы и

В спецификации указаны также единицы и , которые означают размер символа и размер символа .

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

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

Варианты подключения медиазапросов

Подключение медиазапросов с использованием тега <link>

Вы можете подключать различные стили для различных устройств, используя HTML тег <link> (определяет связь между документом и внешним ресурсом) и его атрибута media:

<link media = "mediatype and | not | only (media function)" rel = "stylesheet" href = "stylesheet.css">

Обратите внимание, что в этом случае используется в качестве значения атрибута media тот же синтаксис, что и при использовании правила @media

Подключение медиазапросов с использованием тега <style>

Вы можете подключать различные стили для различных устройств, используя HTML тег <style>, который сообщает браузеру, что внутри него содержится код CSS:

1. Используя атрибут media HTML тега <style>:

<style media =  "mediatype and | not | only (media function)">
	...код CSS 
</style>
	
2. Используя CSS правило @media внутри HTML тега <style>:

<style>
	@media not | only mediatype and (media function) {
	  ...код CSS
	}
</style>

Обратите внимание, что при использовании атрибута media тега

Подключение медиазапросов с использованием правила @import

Кроме того, Вы можете использовать правило @import, которое позволяет копировать стили из других CSS файлов:

@import url("main.css") (min-width:481px) and (max-width:768px); /* импортируем содержимое файла css, который предназначается для устройств с разрешением экрана, находящегося в диапозоне от 481 пикселей до 768 пикселей */
@import url("print.css") print; /* импортируем содержимое файла css, который предназначается для печатных страниц и для режима предварительного просмотра печати */
@import url("protv.css") projection, tv; /* импортируем содержимое файла css, который предназначается для устройств проекционного типа и телевизионного типа */
@import url("file.css") screen and (orientation:landscape); /* импортируем содержимое файла css, который предназначается для экранов компьютера И альбомной ориентации.*/

Учтите тот факт, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь необходимо скачать и проанализировать (создается дополнительный запрос к серверу). Исходя из правил и рекомендаций PageSpeed Insight (), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import.

<link media = "mediatype and | not | only (media function)" rel = "stylesheet" href = "stylesheet.css">

Вы можете подключать различные стили для различных устройств, используя HTML тег <style> (сообщает браузеру, что внутри него содержится код CSS):

1. Используя атрибут media HTML тега <style>:

<style media =  "mediatype and | not | only (media function)">
	...код CSS 
</style>
	
2. Используя CSS правило @media внутри HTML тега <style>:

<style>
	@media not | only mediatype and (media function) {
	  ...код CSS
	}
</style>

Кроме того, Вы можете использовать правило @import, которое позволяет копировать стили из других CSS файлов:

@import url("main.css") (min-width:481px) and (max-width:768px); /* импортируем содержимое файла css, который предназначается для устройств с разрешением экрана, находящегося в диапозоне от 481 пикселей до 768 пикселей */
@import url("print.css") print; /* импортируем содержимое файла css, который предназначается для печатных страниц и для режима предварительного просмотра печати */
@import url("protv.css") projection, tv; /* импортируем содержимое файла css, который предназначается для устройств проекционного типа и телевизионного типа */
@import url("file.css") screen and (orientation:landscape); /* импортируем содержимое файла css, который предназначается для экранов компьютера И альбомной ориентации.*/