• • vw (Viewport Width) — 1% ширины окна
  • vh (Viewport Height) — 1% от высоты окна
  • vmin (Viewport Minimum) — наименьшее из (vw, vh), в IE9 обозначается как vm. Процентная величина от ширины или высоты области просмотра, в зависимости от того, которая из двух меньше.
  • vmax (Viewport Maximum) — наибольший из (vw, vh). Процентная величина от ширины или высоты области просмотра, в зависимости от того, которая из двух больше.

Их главное преимущество состоит в том, что любые указанные в них размеры автоматически масштабируются при изменении размера окна.

ARIA EGPN-VH VW (КОМПЛЕКТ ВЛАДИМИРА ХОЛСТИНИНА)

Всемирно известная японская компания ARIA, совместно с крупнейшей торговой сетью POP-MUSIC и легендарной рок-группой Ария, реализовала проект по производству серии именной гитары бессменного лидера группы — Владимира Холстинина. Цель, преследуемая тремя гигантами, заключается в популяризации и продвижении рок-музыки среди всех поколений музыкантов.

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

В комплект, помимо именной гитары Владимира Холстинина, вошли: комбоусилитель ARIA, гитарный чехол, ремень, гитарный шнур, цифровой тюнер, набор медиаторов.

Технические характеристики:

Электрогитара: 
Форма: STG (стратокастер)
Корпус: Липа
Гриф: Кленовый, U тип, 22 лада, регулировка анкера со стороны головы грифа, привинченный, без накладки, страт типа
Мензура: 648мм (25/1/2”)
Накладка грифа: Клён
Бридж/струнодержатель: стандартное тремоло, хром
Звукосниматели: Минихамбакеры Mini Hum/Mini Hum (в центре только крышка), цвет черный
Переключатель звукоснимателей: 3-х позиционный
Регуляторы: 1 громкость/2 тона, ручки черные (страт-тип)
Цвет: Слоновая кость (Vintage White)

Комбоусилитель для электрогитары ARIA:
Мощность: 10 Вт RMS, динамик 6,5″
Регулировки: 2-х полосный EQ, регулятор громкости и перегруза
Дополнительно: Выход на наушники

Чехол для электрогитары
Тонкий, непромокаемый чехол чёрного цвета

Ремень
Гитарный ремень без наплечника из прочной тесьмы с регулировкой длины. Цвет чёрный.

Гитарный шнур
Шнур джек-джек, длина 3 метра

Тюнер ARIA PT-3000
Профессиональный хроматический цифровой тюнер на прищепке, 12 нот
Диапазон: A0 (27. 5Hz) — C8 (4186.00Hz)
Способ настройки: вибрация
Точность: +0.5 / -0.5
Питание от одной батарейки типа CR2032

Именные медиаторы Владимира Холстинина
Медиаторы бессменного руководителя и гитариста легендарной группы АРИЯ, уникальный графический рисунок. Толщина: 1 мм. Made in JAPAN.

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.

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

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

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

Единицы

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

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

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

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

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

cap Это экспериментальный API, который не следует использовать в производственном коде.

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

шасси

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

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

выс.

Представляет вычисленный размер шрифта элемента. Если используется в самом свойстве 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% от размера исходного содержащего блока в направлении оси блока корневого элемента.

Вмин

Равно меньшим из vw и vh .

vmax

Равно большему из vw и vh .

Единицы абсолютной длины

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

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

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

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

пикселей

Один пиксель. Для экранных дисплеев он традиционно представляет собой один пиксель устройства (точку). Однако для принтеров и с экранами высокого разрешения один пиксель CSS подразумевает несколько пикселей устройства. 1 пиксель = 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 дюйм .

пт

Одно очко. 1pt = 1/72 от 1 из .

mozmm ​​ Этот API не стандартизирован, удален в Firefox 59

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

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

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

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

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

HTML

  

  

     Введите ширину: 
    
  
  


  


  

CSS

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

.outer {
  ширина: 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

  const inputDiv = документ.querySelector ('. внутренний');
const inputElem = document.querySelector ('ввод');
const resultsDiv = document.querySelector ('. результаты');

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

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

  inputElem.value = '';
  inputElem.focus ();
})  

Результат

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

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 размера шрифта текущего элемента.
• Размеры шрифта наследуются от родительских элементов.

Пример:

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

Здесь

rem

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

Пример:

  кузов {
размер шрифта: 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 дюйма, независимо от размера экрана.

новый код — Использование измерений vw и vh в современном дизайне сайта

Некоторые свойства и значения CSS не привлекают особого внимания разработчиков либо потому, что конкретная спецификация не является «достаточно привлекательной», либо потому, что варианты использования не сразу кажутся очевидными. Хорошие примеры последних включают измерения длины vw , vh , vmax и vmin , которые некоторое время были частью модуля значений и единиц CSS3, но только сейчас находят поддержку в современных браузерах.

Как мы увидим в следующей статье, эти новые системы измерения идеально подходят для создания адаптивного и адаптивного дизайна сайтов; А пока давайте рассмотрим общую идею новых агрегатов.

Зачем нужен другой способ измерения в CSS?

Принципы vw , vh просты: они представляют собой процентное соотношение ширины и высоты окна просмотра браузера соответственно.

1vw = 1/100 ширины текущего окна просмотра, т.е.е. 1% ширины

15vh = 15/100 текущей высоты области просмотра или 15% высоты

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

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

  div {ширина: 50%; }  

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

1. корпус ширина не включает поле
2. высоту области просмотра всегда было трудно измерить, поскольку высота зависит от количества содержимого на странице, а не от размеров окна браузера.
3. Самое главное, процентной ширины тела нельзя применить к размеру текста . font-size: 15%. изменяет размер шрифта относительно его исходных или естественных пропорций, не соответствует размерам области просмотра .

Таким образом, эквивалент в единицах vw приведенной выше декларации (без учета любого поля , которое могло повлиять на

) будет:

  div {ширина: 50vw; }  

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

  h2 {размер шрифта: 5vw; }  

Заключение

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

Понравилась эта вещь? Я приглашаю вас подписаться на меня на twitter.com/dudleystorey, чтобы узнать больше.

реагировать-native-css-vh-vw — npm

Аналогично CSS vw и vh единиц — возвращает в пикселях процент от ширина или высота области просмотра.

Установить

npm установить react-native-css-vh-vw

Зависимости

react-native-css-vh-vw сам по себе не имеет зависимостей, но должен использоваться в Реагировать на родной проект.Единственный API-интерфейс React Native, на который он полагается, — это Dimensions , который поддерживает вплоть до первого выпуска React Native.

Использование

Просто передайте значение от 1 до 1000 в

vh () или vw () для стилизации компонентов React Native.

50% высоты области просмотра вашего устройства:

vh (50) .

33,3% ширины области просмотра вашего устройства:

vw (33,3) .

Примеры

• Использование vh () и vw () для установки размеров : Компонент:

 
 const VhVwDemo = (props) => {
 
 
 
 return (
 
  
 height: vh (60), 
 
 width: vw (50), 
 
 backgroundColor: 'синий ', 
 
 justifyContent:' center ', 
 
 alignItems:' center '
 
}}> 
 
  высота: vh (60)  
 
  ширина: vh (50)  
 
  
 
); 
 
} 
 
 
 
 экспорт по умолчанию VhVwDemo; 
 

Выход:

• Использование vh () и vw () для установки размеров <Текст> :

 
 const VhVwDemo = (props) => {
 
 
 
 return (
 
  
 
  fontSize: vw (10)  
 
  fontSize: vh (5)  
 
  
 
); 
 
} 
 
 
 
 экспорт по умолчанию VhVwDemo; 
 

Выход:

Использование единиц просмотра CSS (vw, vh.

..) для размеров шрифта может быть сложно Модули

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

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

---

Пример

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

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

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

[...]

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

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

Войти в полноэкранный режимВыйти из полноэкранного режима

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

  основной {
  ширина: 60вв;
  маржа: авто;
}
  

Войти в полноэкранный режимВыйти из полноэкранного режима

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

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

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

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

Давайте изменим, как наш пример обрабатывает размер шрифта :

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

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

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

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

Войти в полноэкранный режимВыйти из полноэкранного режима

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

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

  основной {
  ширина: 60%;
  максимальная ширина: 70 каналов;
  маржа: авто;
}
  

Войти в полноэкранный режимВыйти из полноэкранного режима

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

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

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

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

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

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

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

---

Вывод

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

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

Цель этой статьи — не пытаться отговорить кого-либо использовать их (наоборот!) , а предложить взгляд на возможные подводные камни их использования, чтобы сделать все в масштабе , и что может быть шаги по предотвращению их.

Лучший мобильный дизайн веб-сайтов: как использовать vw, vh и, rem для создания гибких страниц Divi

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

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

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

Что такое единицы просмотра?

Vw (ширина области просмотра) и vh (высота области просмотра) — это единицы длины, которые представляют ровно 1% от размера любого заданного окна просмотра, независимо от его размеров. Rem (сокращение от ‘root em’) также аналогичен по своей функциональности, хотя он имеет дело конкретно с размерами шрифта и получает свое имя от значения размера шрифта корневого элемента, который в большинстве случаев должен быть равен 16 пикселям. браузеры.

Также доступно несколько дополнительных единиц просмотра (хотя они используются еще реже, чем vw и vh ), например, vmin (минимальное окно просмотра) и vmax (максимальное окно просмотра), которые относятся к соответственно 1% от меньшего размера области просмотра и 1% от его большего размера.У нас также есть ex (x-height) и ch (символьные единицы), которые встречаются даже реже, чем vmin и vmax — , в основном из-за их безумной специфичности. X-height, например, использует размер строчной буквы «x» для определения своего базового значения, которое примерно равно 0,5em (т. Е. 8 пикселей или 6-точечный шрифт), а символьные единицы используют меру « 0 ‘в качестве ориентира.

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

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

В чем преимущество использования единиц просмотра?

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

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

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

 h2 {

размер шрифта: 6vw;

}

h3 {

размер шрифта: 3vw;

}

п {

размер шрифта: 2vmin;

} 

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

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

 
 Пример гибкости реагирования 
 

 

 

 

 


 

Затем мы переходим к CSS:

 body {

обивка: 3vh 3vw;

выравнивание текста: центр;

}

.responseivebox {

дисплей: встроенный блок;

ширина: 16vw;

высота: 60вмин;

маржа: 2vh 2vw;

цвет фона: # 81d8d0;

} 

Быстрый взгляд на код должен быть всем, что вам нужно, чтобы точно понять, что он делает. Сначала мы создали четыре блока div с классом Responsebox , затем задали им ширину, высоту и поля — все с использованием единиц просмотра. Единственное, чего нам здесь не хватает, так это задать относительный размер h2 , чтобы страница была на 100% плавной (хотя и очень простой), поэтому давайте исправим это:

 body {

обивка: 3vh 3vw;

выравнивание текста: центр;

}

h2 {

размер шрифта: 6vw;

}

.responseivebox {

дисплей: встроенный блок;

ширина: 16vw;

высота: 60вмин;

маржа: 2vh 2vw;

цвет фона: # 81d8d0;

} 

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

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

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

Как использовать единицы просмотра с Divi

До сих пор все, что мы рассмотрели, было довольно простым, и, к счастью для вас, так и останется, поскольку использование единиц просмотра для создания страниц Divi чертовски просто.

Фактически, все, что вам нужно для этого, — это немного познакомиться с конструктором Divi и знать, как добавлять собственный CSS в свои разделы и модули.Затем нужно просто настроить код, пока вы не будете удовлетворены своими результатами. Оказавшись внутри Divi Builder, вы захотите щелкнуть один из этих значков, чтобы открыть окно Settings соответствующего раздела или модуля:

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

Давайте использовать один из предустановленных макетов Divi в качестве полигона для тестирования.Это макет Homepage Basic с парой небольших настроек:

Если вы хотите следовать нашему процессу тестирования, не затрагивая ни одну из ваших существующих страниц WordPress, просто создайте новую страницу, активируйте Divi Builder, нажмите Загрузить из библиотеки, и выберите любой из нескольких доступных предопределенных макетов. Мы рекомендуем вам это сделать, поскольку мы не можем точно показать вам эти гибкие страницы в действии, но это также поможет вам ознакомиться с процессом.

Макет Homepage Basic представляет собой простую комбинацию небольшого количества модулей. Слайдер, полноразмерный заголовок, четыре объявления с соответствующими значками и призыв к действию. Давайте немного поиграем с этим ползунком:

Как видите, мы установили ширину ползунка на 75% ширины области просмотра, размер шрифта 5rem (относительно значения размера шрифта HTML по умолчанию). Хотя эффект выглядит очень похоже на скорость отклика Divi по умолчанию, с этой конфигурацией вы сможете лучше контролировать, как ваш сайт будет выглядеть в разных разрешениях.

Теперь перейдем к полноразмерному заголовку. Если все, что вы используете, это простой заголовок, как в макете Homepage Basic , вам нужно ввести свой CSS в поле Title на вкладке Custom CSS :

Размер шрифта

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

В нашем последнем примере давайте попробуем немного другое. Как вы могли заметить, макет Homepage Basic включает четыре текстовых объявления с соответствующими значками. Теперь, с довольно простой настройкой всего двух из этих пятен — второго и четвертого…

… мы можем получить довольно приятный (и полностью отзывчивый) эффект масштабирования:

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

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

Заключение

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

No related posts.