• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Как использовать единицы измерения vw и vh (Как установить размер с помощью единиц vw и vh)
Как использовать единицы измерения vw и vh
Kosten
Дата: Вторник, 04.09.2018, 23:37 | Сообщение 1
Администраторы
Сообщений:18280
Награды: 55


В стилистике 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% от окна просмотра.

Демонстрация

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.

Демонстрация

Какое преимущество использования единиц просмотра

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

Преимущество очевидное с эстетической точки зрения, так как жидкий дизайн просто выглядит лучше. Кроме того, использование видовых экранов по фиксированным блокам создает дополнительное преимущество, заключающееся в том, что их проще внедрять и поддерживать. Реализация адаптивного дизайна в большинстве случаев потребует добавления нескольких медиа-запросов с конкретными значениями, которые должны быть идеальными.
Прикрепления: 7881918.jpg(49.3 Kb) · 9264794.jpg(51.4 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Как использовать единицы измерения vw и vh (Как установить размер с помощью единиц vw и vh)
  • Страница 1 из 1
  • 1
Поиск: