Размер имеет значение… Но какие единицы измерения лучше?
1px – пиксель, это точка на экране пользователя, точный физический размер зависит от разрешения устройства. В каких бы единицах измерения мы бы не писали код, он приводится именно к px. Самая часто встречающаяся величина, как в HTML так и в CSS. Например, начальный размер img изменяется именно в px.
1% – относительная величина (считается либо от родителя либо от монитора), px не равен %
1 em = относительные единицы измерения, относительны значению font-size родителя.
1 rem = относительно значению font-size <html>.
Например: размер font-size у html – 20px, для h1 – 2rem, это будет равно 40px
html {
font-size: 20px;
}
h1 {
font-size: 2rem;
/* что равно 20px * 2rem = 40px */
}
1vw (viewport width) = 1% от ширины окна.
1vh (viewport height) = 1% от высоты окна.
В чем отличие 100vh от 100% ?
Единицы измерения vh и vw
viewport – это видимая часть окна браузера (мобильного или десктопного).
В CSS3 были добавлены относительные единицы измерения, такие как vh и vw. Эти единицы вычисляются относительно размеров окна браузера.
Для desktop ширина окна браузера больше ширины области просмотра (добавляется ширина скроллбара), поэтому если для элемента установить ширину 100vw, то он выйдет за пределы html. Вывод установить ширину 100vw – не самая лучшая идея, если не использовать параллельно свойство overflow. А вот высоту у родительского блока делать 100vh – это очень хорошая идея, так как просто % не отработает.
Единицы vh и vw основаны на использовании процентных значений. Но проценты далеко не лучшее решение для каждого случая, так как они вычисляются относительно размеров ближайшего родительского элемента. Поэтому, если вы хотите использовать высоту и ширину окна браузера, лучше воспользоваться единицами vh и vw. Например, если высота окна браузера равна 900px, то 1vh будет равен 9px. Аналогично, если ширина окна браузера равна 1600px, то 1vw будет равен 16px.
Адаптивное полноэкранное фоновое изображение, то чего все ждали
Так как ширина элемента, указанная с помощью 100vw больше ширины области просмотра, то для создания полноэкранных фоновых изображений лучше использовать ширину 100%, которая будет равна ширине корневого элемента html.
.fon {
background: url(fon.png);
background-position: center;
background-size: cover;
width: 100%;
height: 100vh;
}
Высоту, заданную с помощью vh также можно использовать для выравнивания элемента по центру страницы:
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
Таким образом элемент будет расположен строго по центру!
No comments.