Vw vh: Относительные единицы измерения vh, vw, vmin, vmax
CSS единиц-в чем разница между vh/vw и %?
Я только что узнал о новом и необычном устройстве CSS. vh
и vw
измеряют процент высоты и ширины окна просмотра соответственно.
Я посмотрел на этот вопрос из Stack Overflow, но это сделало единицы еще более похожими.
Как работает vw и vh unit
Ответ, в частности, говорится:
vw и vh-это процент ширины и высоты окна соответственно: 100vw-это 100% ширины, 80vw — 80%, и т. д.
Это похоже на то же самое, что и блок %
, который более распространен.
В инструментах разработчика я попытался изменить значения с vw/vh на % и наоборот и получил тот же результат.
Есть ли разница между ними? Если нет, то почему эти новые единицы были введены в CSS3
?
Поделиться Источник Richard Hamilton
5 ответов
- Как написать css запасных вариантов для vh vw
Может ли кто-нибудь объяснить, как работают резервные варианты в CSS? Я пытаюсь настроить его для vh и vw, и ясно, что я его не получаю… Вот моя попытка решения, которая не работает. Свойство height берется каждый раз. CSS: -webkit-height: 5.2vh; -moz-height: 5.2vh; -ms-height: 5.2vh; -o-height:…
- CSS единиц vh внутри iframe
Я пытаюсь использовать CSS vh единиц внутри iframe. Я нахожу, что они каким-то образом масштабируются до размера iframe. Другими словами, 100vh-это не высота окна. Он установлен на высоту iframe. Кажется ли это правильным? Есть ли обходной путь?
173
100%
может быть 100%
высоты чего угодно. Например, если у меня есть родитель div
, который имеет рост 1000px
, и ребенок div
, который находится на высоте 100%
, то этот ребенок div
теоретически может быть намного выше высоты окна просмотра или намного меньше высоты окна просмотра, даже если этот div
установлен на высоте 100%
.
Если вместо этого я сделаю этот дочерний div
равным 100vh
, то он заполнит только 100%
высоты окна просмотра, а не обязательно Родительский div
.
body, html { height: 100%; } .parent { background: lightblue; float: left; height: 200px; padding: 10px; width: 50px; } .child { background: pink; height: 100%; width: 100%; } .viewport-height { background: gray; float: right; height: 100vh; width: 50px; }
<div>
<div>
100% height
(parent is 200px)
</div>
</div>
<div>
100vh height
</div>
Поделиться Josh Beam 25 июня 2015 в 02:02
29
Я знаю, что этот вопрос очень стар, и @Josh Луч обратился к самой большой разнице, но есть еще один:
Предположим, у вас есть <div>
, прямой потомок <body>
, который вы хотите заполнить весь видовой экран, поэтому вы используете
. Все это работает точно так же, как width: 100%; height: 100vh;
, пока вы не добавите больше контента и не появится вертикальная полоса прокрутки. Поскольку vw
учитывает полосу прокрутки как часть окна просмотра, width: 100vw;
будет немного больше, чем width: 100%;
. Эта небольшая разница заканчивается добавлением горизонтальной полосы прокрутки (необходимой для того, чтобы пользователь видел эту небольшую дополнительную ширину), и, как следствие, высота также будет немного отличаться в обоих случаях.
Это необходимо учитывать при принятии решения о том, какой из них использовать, даже если размер родительского элемента совпадает с размером окна просмотра документа.
Пример:
Использование width:100vw;
:
.fullviewport {
width: 100vw;
height: 100vh;
background-color: red;
}
.extracontent {
width: 100vw;
height: 20vh;
background-color: blue;
}
<html>
<body>
<div></div>
<div></div>
</body>
</html>
Использование width:100%;
:
.fullviewport { width: 100%; height: 100vh; background-color: red; } .extracontent { width: 100%; height: 20vh; background-color: blue; }
<html>
<body>
<div></div>
<div></div>
</body>
</html>
Поделиться IanC 05 декабря 2017 в 11:43
2
Спасибо Вам за ваш ответ и пример кода, @IanC. он мне очень помог. Уточнение: Я полагаю, что вы имели в виду «scrollbar», когда писали «sidebar.»
Вот некоторые связанные с этим обсуждения о единицах просмотра подсчета полос прокрутки, которые я также нашел полезными:
Спецификация W3C для блоков vw, vh, vmin, vmax («viewport percentage lengths») says «any scrollbars are assumed not to exist».
Очевидно, Firefox вычитает ширину полосы прокрутки из 100vw, как @Nolonar’s комментирует разницу между Width:100% и width:100vw? замечает, цитируя «Can I Use».
Могу ли я использовать , возможно, в напряжении со спецификацией (?), говорит, что все браузеры, кроме Firefox в настоящее время «incorrectly», считают 100vw всей шириной страницы, включая вертикальную полосу прокрутки.
Поделиться Slack Undertow
- CSS VW и VH — поддерживать соотношение
У меня есть страница, которая содержит DIV, который поддерживает соотношение сторон. У меня есть некоторый текст в div, который использует VW для размера шрифта, который поддерживает размер текста при изменении ширины страницы — и это здорово. Но когда пользователь меняет высоту окна — я не могу…
- настройка размера шрифта css по vh и vw
Итак, у меня есть текст, который я хочу автоматически изменить в зависимости от размера его контейнера. Однако если я использую что-то вроде font-size: 5vw; это выглядит хорошо, но когда я сжимаю страницу, высота начинает становиться слишком маленькой Есть ли в любом случае, что я могу изменить…
1
единицы измерения vw (view-width) и vh (view-height) соотносятся с размером порта просмотра, где 100vw или vh — это 100% из width/height. порта просмотра
Например, если видовой порт имеет ширину 1600 пикселей и вы указываете что-то как 2vw, это будет эквивалентно 2% ширины видового порта или 32px.
% unit всегда основан на ширине родительского элемента текущего элемента
Поделиться Unknown 26 апреля 2018 в 09:57
0
Есть разница, которая не обязательно была поднята. 100vw включает в себя ширину полосы скрула, в то время как 100% не включает ее. Это небольшая разница, но важная при проектировании.
Поделиться Unknown 17 июля 2019 в 20:05
Похожие вопросы:
«vw» CSS единиц в calc в хроме не работает
Новые vw (и vh , vmin и vmax ) CSS единиц весьма полезны, как и calc . Оба они прекрасно работают в Chrome (последний имеет префикс -webkit-calc ), но по какой-то причине я обнаружил, что значения…
использование modernizr для обнаружения vh, vw с calc
Как пересчитать значения css vw и vh после изменения размера?
Я использую значения vw и vh в своем преобразовании CSS. Это приводит к тому, что анимация css использует фактическую ширину окна. В этом случае изображение cloud перемещается слева направо экрана….
Как написать css запасных вариантов для vh vw
Может ли кто-нибудь объяснить, как работают резервные варианты в CSS? Я пытаюсь настроить его для vh и vw, и ясно, что я его не получаю… Вот моя попытка решения, которая не работает. Свойство…
CSS единиц vh внутри iframe
Я пытаюсь использовать CSS vh единиц внутри iframe. Я нахожу, что они каким-то образом масштабируются до размера iframe. Другими словами, 100vh-это не высота окна. Он установлен на высоту iframe….
CSS VW и VH — поддерживать соотношение
У меня есть страница, которая содержит DIV, который поддерживает соотношение сторон. У меня есть некоторый текст в div, который использует VW для размера шрифта, который поддерживает размер текста…
настройка размера шрифта css по vh и vw
Итак, у меня есть текст, который я хочу автоматически изменить в зависимости от размера его контейнера. Однако если я использую что-то вроде font-size: 5vw; это выглядит хорошо, но когда я сжимаю…
В чем разница между использованием vh/vw vpx и обычным PX/%?
Я использовал SOF в течение долгого времени, но никогда не задавал вопросов. Сегодня я был на сайте Firefox и заметил, что он говорит о px и%, как будто он устарел. Сайт предложил использовать…
Как использовать vw и vh css с React Native
Я создаю базовый логин с помощью React Native с логотипом и 2 входами: //import liraries import React, { Component } from ‘react’; import { View, Text, StyleSheet, Image } from ‘react-native’; //…
Как рассчитать соотношение между vw и vh в CSS году
Я работал на веб-сайте, и поскольку я пытаюсь использовать свойство clip-path в div для создания формы стрелки, которая должна быть прямоугольным треугольником, я уже получаю этот результат:. ..
vw vh css
Всем привет. Сегодня будут рассмотрены относительные единицы измерения появившиеся в спецификации css3. Итак, поехали!
Допустим у нас есть изображение:
<style>
*{
padding:0;
margin:0;
}
</style>
<img src="img/img.jpg">
И мы хотим сделать это изображение на весь экран. Здесь мы можем поступить двумя способами, либо использовать процентные единицы измерения:
img{
width:100%;
height:100%;
}
Или же воспользоваться относительными:
img{
width:100vw;
height:100vh;
}
vw — относительная единица ширины окна,vh — относительная единица высоты окна.
Главным отличием относительных единиц измерения vm, vh от процентных заключается в том что они высчитываются относительно полной ширины и высоты всего окна.
К примеру если полная ширина окна является 1200px, то 1vw будет равняться 12px, а следовательно 100vw полной ширине 1200px. Причем ширина 100vw будет учитываться без полосы прокрутки и поэтому у нас может появится горизонтальный скролл. Помните про это!
Тоже самое и с высотой vh. Если высота окна равняется 10000px, 1vh будет равняться 100px, а 100vh это полная высота окна. Мы также можем указывать значения выходящие за пределы размеров высоты и ширины окна. (300vh,400vw)
Данные единицы измерения как и процентные, отлично переносят масштабирование.
Еще есть такие интересные единицы измерения vmin и vmax.
Допустим ширина нашего окна 1200px, а высота 10000px. Единица измерения vmin — берет минимальный размер из отношения ширины и высоты окна. В нашем случае ширина является минимальным размером 1200px(1vmin=12px), высота максимальным 10000px(1vmax=100px).
Вывод: относительные единицы измерения (vw, vh, vmin, vmax) работают по принципу процентных единиц измерения, но не зависят от размеров элементов и блоков страницы.
Размер высчитывается в процентном соотношении относительно ширины и высоты страницы.
На этом у меня все. Если появились вопросы оставляйте их в комментариях или группе
вкЯ с вами прощаюсь. Желаю успехов и удачи! Пока!
Hokevems
12:26 23-03-2020<a href=»https://parfilagedg.info/casual-dating-belgium/»>https://parfilagedg.info/casual-dating-belgium/</a>
KiaEvive
14:06 22-07-2019[url=http://kamagra50.com/]kamagra online[/url]
EyeEvive
13:19 21-07-2019<a href=»https://kamagra50.com/»>kamagra 100mg</a>
DenEvive
11:59 21-07-2019<a href=»https://kamagra50.com/»>kamagra online</a>
JasonEvive
18:49 17-07-2019<a href=»https://kamagra50.com/»>kamagra</a>
Web-разработка • HTML и CSS
В CSS3 были добавлены новые относительные единицы измерения vh
и vw
, которые вычисляются относительно размеров окна браузера. Для настольных компьютеров ширина окна браузера больше ширины области просмотра (добавляется ширина скроллбара), поэтому если для элемента установить ширину 100vw
, то он выйдет за пределы html
.
Единица | Описание |
---|---|
vh |
Эквивалентно 1% высоты окна браузера |
vw |
Эквивалентно 1% ширины окна браузера |
Адаптивное полноэкранное фоновое изображение
Так как ширина элемента, указанная с помощью 100vw
, больше ширины области просмотра, то для создания полноэкранных фоновых изображений лучше использовать ширину 100%
, которая будет равна ширине корневого элемента html
.
.fullscreen-background { background: url(image.jpg); background-position: center; background-size: cover; width: 100%; height: 100vh; }
Блок на всю высоту окна браузера
Чтобы сделать блок на всю высоту окна браузера, необходимо задать height: 100%
для трёх элементов — html
, body
и непосредственно для самого блока:
html, body { height: 100%; } section { height: 100%; }
Так как процентные размеры вычисляются относительно значений родительских элементов, то необходимо установить соответствующие значения для каждого элемента DOM. Единица измерения vh
не требует установки значений по цепочке, так как её значение вычисляется напрямую относительно окна браузера:
section { height: 100vh; }
Выравнивание элемента по центру страницы
Высоту, заданную с помощью vh
, также можно использовать для выравнивания элемента по центру страницы:
body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; }
Теперь любой элемент будет расположен строго по центру без каких-либо дополнительных приёмов.
Поиск: CSS • Web-разработка • Верстка • Высота • Ширина • Окно браузера • ViewPort • Width • Height • Выравнивание
Единицы измерения CSS (px, %, em, vw, vh, vmin, vmax)
Ситуация: вот только что на странице было все красиво… и вдруг расползлось. Зловредный лось. А все дело оказалось в единицах измерения CSS.
Многие свойства CSS имеют свои единицы измерения, рассматривать все полностью нет необходимости. Но некоторые уточнения необходимы. Особенно есть смысл обращать внимание на единицы измерения при импорте шаблонов.
1px (пиксель) = 1/96 дюйма, но не в CSS. 1 px в CSS — это точка на экране пользователя, физическая величина которой зависит от разрешения устройства и от того, с какого расстояния человек смотрит на его поверхность (мобильный телефон или телевизор). В каких бы единицах измерения мы бы не писали код, он приводится именно к px.
1 em = значению font-size родителя. По сути, относительная величина, поэтому font-size разных блоков может быть разный, а размер шрифта одинаковый.
1 rem = значению font-size <html> (корневого элемента документа).
1 процент (1%) — значение высчитывается относительно значения свойства родительского тега.
При уменьшении ширины родителя, уменьшается и ширина элемента, но не его шрифт.
1vw = 1% от ширины окна. При уменьшении ширины окна, уменьшается ширина, высота, шрифт элемента. Шрифт не будет масштабирован при нажатии Ctrl+ или Ctrl-.
1vh = 1% от высоты окна. При уменьшении высоты окна, уменьшается ширина, высота, шрифт элемента. Шрифт не будет масштабирован при нажатии Ctrl+ или Ctrl-.
1vmin = 1vw или 1vh. Выбирается то, которое меньше.
1vmax = 1vw или 1vh. Выбирается то, которое больше.
Функция calc()
Никогда не хотелось от процентов вычесть пиксели или емы?
Теперь это возможно. Функция calc() позволяет реализовать математические выражения
+ добавление (символ отделяется пробелами с двух сторон) - вычитание (символ отделяется пробелами с двух сторон) * умножение / деление
PX в VW, VH онлайн калькулятор
vh, vw, vmin, vmax — это относительные единицы измерения. Эти единицы вычисляются относительно размеров окна браузера.
PX в VW онлайн калькулятор
В настоящее время с современным CSS у нас есть новые функции, такие как единицы просмотра. Это открывает возможность гибкого подхода к определению шрифта или других размеров. Это очень полезно, и каждый разработчик, создающий адаптивные веб-сайты, должен знать об этой опции. Это уже безопасный метод для старых браузеров, поэтому вы можете использовать его в каждом проекте.
Единица ширины области просмотра «vw» — это сокращение от «ширина области просмотра» и процентное значение ширины области просмотра.
ПИКСЕЛИ: PX
Пиксель (px) — это самая основная, абсолютная и окончательная единица измерения.
Количество пикселей задается в настройках разрешения экрана, один пиксель — это всего лишь один такой пиксель на экране. Браузер в конечном итоге преобразует все значения в пиксели.
Пиксели могут быть дробными, например, размер можно установить на 16,5 пикселей. Это совершенно нормально, сам браузер использует дробные пиксели для внутренних вычислений. Например, есть элемент шириной 100 пикселей, его нужно разделить на три части — волей-неволей появятся 33,333… пикселя. При окончательном рендеринге дробные пиксели, конечно же, округляются и становятся целыми.
Для мобильных устройств, у которых на экране много пикселей, но сам экран небольшой, браузер автоматически применяет масштабирование для обеспечения удобочитаемости.
ОТНОСИТЕЛЬНО ЭКРАНА: VW, VH
Все современные браузеры, кроме IE8, поддерживают новые относительные единицы измерения CSS:
- 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 мкм.
-
выс.
- Представляет вычисленный размер шрифта
-
бывш.
- Представляет высоту по оси 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 ();
})
Результат
Спецификация | Статус | Комментарий |
---|---|---|
Значения и единицы CSS Уровень модуля 4 Определение «<длина>» в этой спецификации. | Черновик редакции | Добавляет единицы vi , vb , ic , lh и rlh . |
Значения и единицы CSS Уровень модуля 3 Определение «<длина>» в этой спецификации. | Кандидат в рекомендации | Добавляет блоки ch , rem , vw , vh , vmin , vmax и Q . |
CSS Level 2 (Revision 1) Определение « | Рекомендация | Явное определение единиц em , pt , pc и px . |
Уровень CSS 1 Определение «<длина>» в этой спецификации. | Рекомендация | Первоначальное определение. Неявное определение единиц em , pt , pc и px . |
Таблицы 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 , эти единицы также полагаются на семейство шрифтов
Существует два основных типа единиц длины и размера в CSS: относительные и абсолютные.
Относительные единицыОтносительные единицы изменяются относительно текущего размера шрифта элемента или других настроек. Некоторые относительные единицы:
em
- ширина заглавной буквы M размера шрифта
- Размеры шрифта наследуются от родительских элементов.
Пример:
div {
размер шрифта: 16 пикселей;
}
div h4 {
размер шрифта: 2rem;
}
Здесь
будет равно 32px
, поскольку размер шрифта
текущего или родительского элемента равен 16px
.
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%; }
Применительно почти к любому элементу ширина в процентах коррелирует размер элемента с размером его контейнера, который может включать в себя окно браузера: действительно, концепция и практика жидких изображений полностью полагаются на этот факт.Но небольшое рассмотрение показывает, что процентные измерения имеют некоторые существенные ограничения:
-
корпус
ширина не включает поле - высоту области просмотра всегда было трудно измерить, поскольку высота
- Самое главное, процентной ширины тела нельзя применить к размеру текста .
font-size: 15%.
изменяет размер шрифта относительно его исходных или естественных пропорций, не соответствует размерам области просмотра .
Таким образом, эквивалент в единицах Чтобы масштабировать заголовок по отношению к ширине окна браузера, вы можете использовать: Устройства vw и vh имеют уникальное приложение для мобильной разработки и предлагают единственный способ предсказуемо масштабировать текст в соответствии с размером области просмотра, одновременно предоставляя полезный способ создания идеальных адаптивных форм. Понравилась эта вещь? Я приглашаю вас подписаться на меня на twitter.com/dudleystorey, чтобы узнать больше. Аналогично CSS const VhVwDemo = (props) => { return ( height: vh (60), width: vw (50), backgroundColor: 'синий ', justifyContent:' center ', alignItems:' center ' }}> ); } экспорт по умолчанию VhVwDemo; Выход: const VhVwDemo = (props) => { return ( ); } экспорт по умолчанию VhVwDemo; Выход: окна просмотра CSS, такие как Но каковы последствия масштабирования всего, используя простые единицы области просмотра? Рассмотрим эту простую веб-страницу, отображаемую в области просмотра шириной 1440 пикселей. В этом примере размер шрифта определяется в корне документа с использованием Исключение из правила, размер нашего основного контейнера содержимого составляет При такой настройке, поскольку все масштабируется, оно должно выглядеть одинаково независимо от разрешения. И, конечно же, это так. Вот та же веб-страница, отображаемая в области просмотра шириной 960 пикселей. И снова во вьюпорте шириной 4800 пикселей. Чтобы смоделировать различные размеры области просмотра, я просто использовал функцию увеличения / уменьшения масштаба Firefox. Хотя это доказало мою точку зрения о том, что все масштабируется без проблем, оно также высветило одну серьезную проблему: пользователь больше не может увеличивать текст, увеличивая масштаб! Это, конечно, проблема удобства использования / доступности, которую мы хотим предотвратить.Такое поведение может быть «несколько прекрасным» , хотя, если каждая отдельная часть копии на экране очень большая, что здесь не так. Поскольку размер шрифта для всего основан на ширине области просмотра в этом примере, если я хочу разместить два окна бок о бок, уменьшив их ширину, я в конечном итоге все значительно сжимаю, и содержимое становится намного труднее читать. . Представьте на экране ноутбука 13 дюймов следующее: Это еще более проблематично, учитывая, что масштабирование браузера больше не работает! На последнем из трех снимков экрана мое окно просмотра имеет ширину 4800 пикселей.На моем 13-дюймовом экране он по-прежнему выглядит отлично, но как насчет людей, просматривающих эту страницу на 32-дюймовом экране или больше? Что ж, это будет выглядеть точно так, как показано на скриншоте, но на массивном 32-дюймовом экране, с слишком большими символами и шириной контейнера 19,2 дюйма! Если мы не хотим, чтобы некоторые из наших посетителей выглядели так, как будто они смотрят теннис, когда они читают наш контент, мы можем избежать этого. В этом примере единственное место, где мы даем прямое значение Что, если нам нужна некоторая масштабируемость, но при этом убедиться, что контент по-прежнему читается почти во всех случаях, при этом при этом работает функция масштабирования? Первое, что мы могли бы сделать, это добавить Давайте изменим, как наш пример обрабатывает размер шрифта Прежде чем мы проверим это, давайте добавим еще одно правило: поскольку размер шрифта не будет масштабироваться так сильно, как раньше, и что мой контейнер содержимого по-прежнему составляет 60% ширины экрана, я не хочу в конечном итоге с очень длинными строками текста. Чтобы исправить это, я могу использовать Используя Вот как это выглядит в окне просмотра шириной 1440 пикселей. При 960 пикселей. При 4800 пикселей (представьте это на сверхшироком экране) И, наконец, в режиме «бок о бок» с «нечетными» размерами области просмотра . (я добавил простой медиа-запрос, чтобы контент занимал всю ширину области просмотра менее 768 пикселей) Несколько медиа-запросов сделали свое дело: вещи больше не масштабируются так плавно, но они масштабируются правильно, и контент читается во всех случаях. являются фантастическим дополнением к арсеналу CSS: они удобны и, наконец, сделали идею «сгиба» на странице на возможной без использования единой строчки JavaScript. Цель этой статьи — не пытаться отговорить кого-либо использовать их (наоборот!) , а предложить взгляд на возможные подводные камни их использования, чтобы сделать все в масштабе , и что может быть шаги по предотвращению их. Отзывчивость в веб-дизайне больше не является обязательной. Вряд ли кто-то станет спорить с этой предпосылкой — если только он не живет в пещере последнее десятилетие. Споры о настоящие заключаются в том, как лучше всего сделать ваш дизайн адаптивным. Стоит ли начинать свой дизайн с мобильной точки зрения и постепенно переходить к обычным окнам просмотра? Стоит ли просто адаптировать готовый дизайн к мобильным устройствам? Это сложный выбор. Рабочий процесс у всех разный, и, скорее всего, вы уже разработали свой собственный подход к адаптивному дизайну. Единственное, что мы можем заявить с почти абсолютной уверенностью, это то, что если вы еще не начали включать единицы просмотра (например, 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, чтобы текст всегда оставался пропорциональным, например: В этом примере текст всегда будет пропорционален друг другу и ширине области просмотра при изменении.Вы даже можете пойти дальше и использовать эти единицы для создания контейнеров для вашего текста, которые при правильной ширине всегда будут обеспечивать оптимальную длину строки, как мы упоминали ранее. Давайте рассмотрим еще один короткий и приятный пример. На этот раз мы создадим несколько блоков с использованием единиц просмотра, которые будут служить базовой демонстрацией гибких страниц. Начнем с HTML: Затем мы переходим к CSS: Быстрый взгляд на код должен быть всем, что вам нужно, чтобы точно понять, что он делает. Сначала мы создали четыре блока div с классом Responsebox , затем задали им ширину, высоту и поля — все с использованием единиц просмотра. Единственное, чего нам здесь не хватает, так это задать относительный размер h2 , чтобы страница была на 100% плавной (хотя и очень простой), поэтому давайте исправим это: Это основы того, что может быть достигнуто с помощью единиц просмотра, но, как вы, возможно, ожидали, некоторые люди пошли дальше своей реализации и собрали вместе некоторые действительно интересные вещи, используя их — взгляните, например, на этот CSS MacBook на CodePen . Если вы взглянули на CSS, то, возможно, заметили, как он смешивает единицы окна просмотра с обычными старыми значениями пикселей, чтобы добиться очень крутого эффекта.Наша точка зрения заключается в том, что, как и во всем остальном, что связано с CSS, нет предела тому, что с ним можно сделать. Теперь, когда основы позади, пора двигаться дальше и применить нашу недавно обретенную мудрость к теме 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 довольно просто.Все, что вам нужно, — это немного времени и терпения, чтобы изменить настройки модуля, пока вы не будете довольны своими результатами в нескольких разрешениях. Вам, конечно же, придется постоянно тестировать эти настройки, чтобы видеть, насколько они работают — мы вам поможем. Трудно переоценить важность создания мобильных дизайнов, о чем мы все знаем. Мобильные устройства так быстро стали нормой, что отказ от адаптивности в дизайне может быть равносилен заявлению о том, что вы не заботитесь об их успехе. vw
приведенной выше декларации (без учета любого поля
, которое могло повлиять на
div {ширина: 50vw; }
h2 {размер шрифта: 5vw; }
Заключение
реагировать-native-css-vh-vw — npm
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 ()
для установки размеров
:
Компонент:
vh ()
и vw ()
для установки размеров <Текст>
:
Использование единиц просмотра CSS (vw, vh.
..) для размеров шрифта может быть сложно Модули vw
и vh
, чрезвычайно полезны, поскольку они обеспечивают способ определения размеров объектов в соответствии с размерами окна просмотра текущего браузера. Их удобство заставляет заманчиво изменять размер всего, что с их помощью, включая текст: это означает меньше медиа-запросов с произвольными точками останова и совершенно единообразный внешний вид во всех окнах просмотра. Пример
vw
, а все остальные элементы используют rem
в качестве единицы длины, что в основном переводится как «, используйте размер шрифта, определенный для
для определения размера x «. Таким образом, размеры большинства элементов на странице напрямую связаны с размером шрифта
из
.
Войти в полноэкранный режимВыйти из полноэкранного режима html {
размер шрифта: 1.5vw;
}
[...]
main> h2 {
дисплей: встроенный блок;
размер шрифта: 1,75 бэр;
набивка: 1 бэр;
цвет фона: черный;
цвет белый;
}
main> p {
размер шрифта: 1 бэр;
высота строки: 1,25 бэр;
обивка-дно: 1 бэр;
}
vw
, поэтому он всегда занимает 60% ширины области просмотра.
Войти в полноэкранный режимВыйти из полноэкранного режима основной {
ширина: 60вв;
маржа: авто;
}
Проблема №1: функция масштабирования браузера больше не работает
Проблема №2: изменение размера окна браузера влияет на удобочитаемость
Проблема №3: на большом экране текст будет выглядеть массивно
Решение: на помощь приходят медиа-запросы!
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 пикселей;
}
}
ch
для ограничения максимальной ширины содержимого:
Войти в полноэкранный режимВыйти из полноэкранного режима основной {
ширина: 60%;
максимальная ширина: 70 каналов;
маржа: авто;
}
max-width: 70ch
, я говорю браузеру : «Я хочу, чтобы размер
был не более чем в 70 раз больше, чем размер символа 0 текущего шрифта». , что примерно соответствует строкам длиной до 80 символов. (Подробнее о том, как это работает, см. В статье Эрика Мейера на ch) Вывод
Блоки просмотра Лучший мобильный дизайн веб-сайтов: как использовать vw, vh и, rem для создания гибких страниц Divi
Что такое единицы просмотра?
В чем преимущество использования единиц просмотра?
h2 {
размер шрифта: 6vw;
}
h3 {
размер шрифта: 3vw;
}
п {
размер шрифта: 2vmin;
}
Пример гибкости реагирования
body {
обивка: 3vh 3vw;
выравнивание текста: центр;
}
.responseivebox {
дисплей: встроенный блок;
ширина: 16vw;
высота: 60вмин;
маржа: 2vh 2vw;
цвет фона: # 81d8d0;
}
body {
обивка: 3vh 3vw;
выравнивание текста: центр;
}
h2 {
размер шрифта: 6vw;
}
.responseivebox {
дисплей: встроенный блок;
ширина: 16vw;
высота: 60вмин;
маржа: 2vh 2vw;
цвет фона: # 81d8d0;
}
Как использовать единицы просмотра с Divi
Заключение