| Kosten | Вторник, 04 Сентября 2018, 23:37 | Сообщение 1 |
| В стилистике CSS3, если кто не знает, то появились совершенно новые единицы, которые идут под измерение. Вероятно вы слышали, и работали с такими единицами, как px, pt, em и также есть обновленная rem. Но в этой статье как можно подробно рассмотрим такие, как vw и vh. При помощи единиц vw и vh, вы также в аналогичном виде можете выставить тот размер элементу, который будет относителен размеру вью порта. Сами единицы безусловно интересны тем, что как пример 1vw - будет ровняться 1/100'ой ширине viewport. Для того, чтоб присвоить элементу заданную ширину, что идет аналогично ровная ширина viewport, то здесь как пример установочный процесс будет в таком размере, как width:100vw.
Единицы просмотра являются относительными единицами, что означает, что они не имеют объективного измерения. Вместо этого их размер определяется размером окна просмотра. Рабочий процесс каждого человека отличается, где скорее всего, вы уже разработали свой собственный подход к гибкому дизайну. Единственное, что мы можем сказать с абсолютной уверенностью, если вы еще не начали включать единицы просмотра "например, vw, vh" в свой CSS, то на современном дизайне нужно работать с такой единицей.
Ширина просматривающего экрана (vw) и аналогично идет высота окна просмотра (vh) - значения процентного значения, представленные в CSS3. Учитывая, насколько они актуальны с полной поддержкой браузера, они безусловно должны быть актуально применяемые, так как корректно выводят все элементы.
Сама цель статьи состоит в том, чтоб показать как нужно использовать vw и vh, где увидите, что с процентами их невозможно сравнить.
VH
Устройство vh может быть использовано для заполнения фона окна просмотра.
HTML
Код <div class="kewport-pedentag-1"><div class="satunit-roducen"><h1>Vh - Zornet.Ru #1</h1><h2>Прокрутка вверх</h2></div></div> <div class="kewport-pedentag-2"><div class="satunit-roducen"><h1>Vh - Zornet.Ru #2</h1><h2>Прокрутка вверх</h2></div></div>
CSS
Код h1 {
font: 50px/1.3 "Abril Fatface", serif;
color: #4e70bd;
text-align: center;
}
h2 {
font: 14px/1.7 'Source Code Pro', monospace;
color: #bfbfbf;
text-transform: uppercase;
text-align: center;
}
.kewport-pedentag-1 {
text-shadow: 0 1px 0 #807a7a;
background-size: cover;
background-image: url('http://zornet.ru/ABVUN/sarunolas/Gamilsatun/zornet_ru/oboi-na-rabochiy-stol-osen-1.jpg');
height: 100vh;
}
.kewport-pedentag-2 {
text-shadow: 0 1px 0 #807a7a;
background-size: cover;
background-image: url('http://zornet.ru/ABVUN/sarunolas/Gamilsatun/zornet_ru/1477644195_002.jpg');
height: 100vh;
}
.satunit-roducen
{
padding-top: 47px;
margin: 0 auto;
max-width: 415px;
}
Свойство height устанавливает фон на всю высоту окна просмотра. Устройство vh использует проценты, так что 100vh составляет 100% от окна просмотра.
See the Pen
Единицы vh by Kocsten (@kocsten)
on CodePen.
VW
Блок vw может быть использован для заполнения окна просмотра фона для горизонтальной прокрутки сайтов.
HTML
Код <div id="nougsato-kecontain"> <div class="againasem-percentag-1"><div class="tupoperty-sentabon"><h1>Vw - ZorNet.Ru - портал №1</h1><h2>Прокрутка вправо</h2></div></div> <div class="againasem-percentag-2"><div class="tupoperty-sentabon"><h1>Vw - ZorNet.Ru - портал №2</h1><h2>Прокрутка влево</h2></div></div> </div>
CSS
Код h1 {
font: 50px/1.3 "Abril Fatface", serif;
color: #efeff3;
text-align: center;
}
h2 {
font: 15px/1.8 'Source Code Pro', monospace;
color: #e0e0e4;
text-transform: uppercase;
text-align: center;
}
#nougsato-kecontain {
width: 200vw;
}
.againasem-percentag-1 {
float: left;
background-size: cover;
background-image: url('http://zornet.ru/ABVUN/sarunolas/Gamilsatun/zornet_ru/super-moon-blue-wallpaper.jpg');
width: 100vw;
height: 100vh;
}
.againasem-percentag-2 {
float: left;
background-size: cover;
background-image: url('http://zornet.ru/ABVUN/sarunolas/Gamilsatun/zornet_ru/1486649976161954098.jpg');
width: 100vw;
height: 100vh;
}
.tupoperty-sentabon {
padding-top: 50px;
margin: 0 auto;
width: 390px;
}
Свойство width устанавливает фон на всю ширину окна просмотра, опять же в процентах. Свойство div контейнера width имеет значение 200vw 200% ширины окна просмотра, достаточное для размещения двух плавающих div.
See the Pen
Единица Backgrounds and vw by Kocsten (@kocsten)
on CodePen.
Какое преимущество использования единиц просмотра
При правильном внедрении единиц видового экрана вы можете создать чувствительный к воздействию жидкости эффект, который сильно отличается от простого адаптивного сайта. Адаптивный дизайн будет автоматически корректировать свой размер по мере изменения вашего видового экрана, тогда как адаптивный дизайн будет корректироваться, как только ваш видовой экран достигнет определенного размера, благодаря использованию медиа-запросов.
Преимущество очевидное с эстетической точки зрения, так как жидкий дизайн просто выглядит лучше. Кроме того, использование видовых экранов по фиксированным блокам создает дополнительное преимущество, заключающееся в том, что их проще внедрять и поддерживать. Реализация адаптивного дизайна в большинстве случаев потребует добавления нескольких медиа-запросов с конкретными значениями, которые должны быть идеальными.
| | Страна: (RU) |
| |
| Kosten | Понедельник, 23 Сентября 2019, 03:28 | Сообщение 2 |
|
| Устройство vh может быть использовано для заполнения фона окна просмотра, он же окно браузера. Свойство height устанавливает фон на всю высоту окна просмотра. Модуль vh использует проценты, поэтому 100vh составляет 100% от области просмотра.
See the Pen
Фоны и VH by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
| Kosten | Понедельник, 23 Сентября 2019, 03:31 | Сообщение 3 |
|
| Блок vw может быть использован для заполнения окна просмотра фона для горизонтальной прокрутки сайтов. Свойство width устанавливает фон на всю ширину окна просмотра, опять же в процентах. Свойство контейнера div width имеет значение 200vw # 200% ширины области просмотра, достаточное для размещения двух плавающих элементов div.
See the Pen
Фоны и VW by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
