Vw vh css: Уроки по CSS: что такое единицы просмотра vw, vh, vmin и vmax

Leave a Comment / Css / By /

Содержание

Единицы длины VW и VH в CSS, которые вы не знаете

Обычно, когда мы хотим установить элемент для заполнения экрана, мы можем установить длину и ширину этого элемента равными100%, Код CSS выглядит следующим образом

.block {
    height: 100%;
    width: 100%;
}
Скопировать код

Хорошо, как вы думаете, это будет сделано?

НЕТ! Как это возможно! Будет ли так просто заполнить экран? Проверил вашhtml bodyЭто высота и ширина? а это не100%, ОК, даже если эти двое уже100%А как насчет вашего объекта-контейнера? Таким образом, полный CSS будет записан так

html, body {
    height: 100%;
    width: 100%;
}
.container {
    height: 100%;
    width: 100%;
}
.container .block {
    height: 100%;
    width: 100%;
}
Скопировать код

Хорошо, теперь все должно быть ОК, НЕТ! как это возможно! Теперь вы ограничиваете высоту и ширину этого контейнера. Что делать, если содержимое страницы превышает ограничения по высоте и ширине? Тогда твой

100%Дело не в размере экрана.

Другая проблема — это метод позиционирования. Если другие ваши элементы используютfixed absoluted relative Или использовалfloat:left float:rightДождитесь позиционирования, тогда исходная высота коробки будет уничтожена, даже если она установлена100%Возможно, он не сможет заполнить весь экран.

Есть решение? Конечно, вы можете использовать CSScalcПриходите рассчитывать длину и ширину динамически, но здесь есть проблемы с производительностью.calcЕго необходимо вычислять каждый раз, когда изменяется стиль CSS, что потребляет много производительности.

Можете ли вы использовать JS для его динамической настройки? Конечно, есть много готовых библиотек.

но! Сегодня я собираюсь представить собственный CSS, и это очень удобно! То естьvw с участием

vhБрат, давай посмотрим, как они его используют

. block {
    width: 100vw;
    height: 100vh;
}
Скопировать код

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

Давайте посмотрим на эти две единицыvw = viewport width vh = wiewport heightПроще говоря, это ширина и длина визуального представления устройства. Значение выражается в процентах, т.е.100%Используйте его таким же образом, чтобы мы могли легко установить нужную длину и ширину.

Тогда возникает проблема: если длина установленного мной элемента занимает весь экран, не приведет ли это к увеличению высоты контейнера в бесконечном цикле? Ответ, конечно, нет, используйте

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

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

Кстати, хотя эти два модуля добавлены недавно, апплет WeChat также поддерживается.

Надеюсь, эта статья будет вам полезна

Интеллектуальная рекомендация

Синхронизированное ключевое слово многопоточности Java

Синхронизированная функция Метод синхронизации поддерживает простую стратегию предотвращения пересечения потоков и ошибок согласованности содержимого. Если объект виден для нескольких потоков, все чте…

Проблема: [шаблон] LCA ближайшего общего предка

Проблема: [шаблон] LCA ближайшего общего предка Time Limit: 3 Sec Memory Limit: 128 MB Description Дает N, Q означает, что дерево имеет N точек, а корень дерева равен 1. Q означает, что есть Q запросо…

Круд реализации на основе гибернации

  цель:  понятьHibernateИспользование основного интерфейса; Оставьте основной метод проектирования интерфейса настойчивости; ЗнакомствоHibernateСпособ использования производительности; содер…

Интернет-протокол (2) — сверху вниз

Продолжить с предыдущего поста: блог Ruan Yifeng каталог Семь, резюме Восемь, интернет-настройки пользователя 8. 1 Статический IP-адрес 8.2 Динамический IP-адрес 8.3 Протокол DHCP 8.4 Настройки Интерне…

Путь обучения Python

Эта часть представляет собой ссылку на блоги, которые вы читали в лабораторном здании, и вы обычно читаете ее, потому что вы можете избежать создания среды в лабораторном здании, и вы можете начать пр…

Вам также может понравиться

Почему MySQL использует, почему влияет на производительность

1、 2、 3, MySQL версия 5.7 Идентификатор является самоинтенсивным первичным ключом, Val — неиспользуемый индекс. Инфузия многих данных, всего 5 миллионов: Мы знаем, что когда смещение в ограниченных ст…

Программирование Java использует массив вывода Tang Poetry

Описание проблемы: Использование программирования Java для использования массива для вывода поэзии Tang. Исходный код программы:  …

oracle 11g r2 OEM конфигурация

Используйте среду:win8+oracle 11g r2 Предисловие:Я не знаю, в чем причина (несколько причин), установленный Oracle не имеет EM, поэтому вам нужно настроить PS：В процессе настройки возникли различные п. ..

В Java реализована фильтрация чувствительных слов — инструмент сегментации китайских слов IKAnalyzer

IKAnalyzer — это легкий набор инструментов для сегментации китайских слов с открытым исходным кодом, разработанный на основе языка java. Официальный веб-сайт:https://code.google.com/archive/p/ik-analy…

Объектно-ориентированный

1.1SinStance и IssubClass ISinstance (OBJ, CLS) Проверьте объект (OBJ), является ли это классом (объект класса) ISBClass (sub, super) Проверьте класс класса (sub) — это производный класс супер -класса…

— CSS | MDN

CSS тип данных <length> представляет единицу длины. Длина может быть использована в таких свойствах CSS как width, height, margin, padding, border-width, font-size, и text-shadow.

Примечание: Обратите внимание: Хоть значения <percentage> также определяют размеры и могут использоваться в некоторых свойствах, принимающих значения типа <length>, они не являются <length> значениями.

Тип данных <length> состоит из <number>, за которым следует одна из единиц измерения, перечисленных ниже. Как и у любых единиц измерения CSS между числом и единицей нет знака пробела. После числа 0 единица измерения необязательна.

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

Единицы измерения

Относительные единицы измерения

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

Единицы, зависящие от шрифта

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

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

cap Экспериментальная возможность

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

ch

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

em

Представляет подсчитанный размер шрифта элемента. Если используется в свойстве font-size, представляет унаследованный размер шрифта.

ex

Представляет x-height (обычно высоту буквы x) в шрифте, применённом к элементу. В шрифтах с буквой x это обычно высота букв в нижнем регистре; во многих шрифтах 1ex ≈ 0.5em.

ic Экспериментальная возможность

Равна используемой в шрифте ширине символа «水» (ККЯ, символ «вода», U+6C34).

lh Экспериментальная возможность

Равна рассчитанному значению свойства line-height, переведённому в абсолютные единицы измерения.

rem

Представляет размер шрифта корневого элемента (обычно <html>). Когда используется в свойстве font-size корневого элемента, представляет значение по умолчанию (в большинстве браузеров 16px, но настройки пользователя могут переопределить это значение).

rlh Экспериментальная возможность

Равна рассчитанному значению свойства

line-height корневого элемента (обычно <html>), переведённому в абсолютные единицы измерения. Когда используется в свойстве font-size корневого элемента, представляет значение по умолчанию.

Единицы, зависящие от размеров экрана

Эти единицы определяют значение <length> относительно размеров экрана, то есть видимой части документа. эти единицы недопустимы в блоках @page.

vh

Равна 1% высоты блока содержимого.

vw

Равна 1% ширины блока содержимого.

vi Экспериментальная возможность

Равна 1% размера блока содержимого по направлению выстраивания строчных элементов.

vb
Экспериментальная возможность

Равна 1% размера блока содержимого по направлению выстраивания блочных элементов.

vmin

Равна vh или vw в зависимости от того, что из них меньше.

vmax

Равна vh или vw в зависимости от того, что из них больше.

Абсолютные единицы измерения

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

Для устройств с маленьким dpi (dots per inch — количество точек на дюйм) единица измерения px представляет физический пиксель; остальные единицы определяются относительно него. Таким образом,

1in определяется как 96px, что равно 72pt. Последствием такого способа определения является то, что длины, описанные в дюймах (in), сантиметрах (cm) или миллиметрах (mm) необязательно равны одноимённым физическим единицам.

Для устройств с высоким dpi дюймы (in),сантиметры (cm) и миллиметры (mm) такие же, как и соответствующие физические единицы. Таким образов, единица px определяется относительно их (1/96 одного дюйма).

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

px

Один пиксель. Для устройств с дисплеев традиционно представляет одну точку. Тем не менее, на принтерах и экранах с высоким разрешением один пиксель CSS равен нескольким пикселям дисплея. 1px = 1/96 от 1in.

cm

Один сантиметр. 1cm = 96px/2.54.

mm

Один миллиметр. 1mm = 1/10 от 1cm.

Q Экспериментальная возможность

Четверть миллиметра. 1Q = 1/40 от 1cm.

in

Один дюйм. 1in = 2.54cm = 96px.

pc

Одна пайка. 1pc = 12pt = 1/6 от 1in.

pt

Одна точка. 1pt = 1/72 от1in.

mozmm Non-standard , удалена в Firefox 59

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

При анимации значения <length> интерполируются как реальные числа с плавающей запятой. Интерполяция происходит над рассчитанным значением. Скорость интерполяции определяется временной функцией (en-US) анимации.

Specification
Unknown specification
# lengths

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Last modified: , by MDN contributors

Единицы в CSS

1- Единицы измерения (Units)

CSS предоставляет разные единицы измерения (Unit) для представления длины, некоторые из них имеют историю от Topography (топографическое измерение), например PT (Point) и PC (Pica), некоторые другие знакомые единицы, такие как CM (Centimeter), IN (Inch),…

Любая единица измерения в CSS может быть использована для любого свойства (property) связанного с длиной, размером, как CSS font-size, width, height,. .. Но есть некоторые рекомендации для вашего использования:


Rec­om­mended
(Рекомендуется)		Oc­ca­sional use
(Для постоянного использования)		Not rec­om­mended
(Не рекомендуется)
Screen
(Экран)		em, px, %expt, cm, mm, in, pc
Print
(Печать)		em, cm, mm, in, pt, pc, %px, ex

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

В основном, единицы измерения делятся на 2 вида: Единица абслютной длины и единица относительной длины.

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

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

UnitNameEquivalent to
cmCentimeters1cm = (1/2. 54) of 1in
mmMillimeters1mm = 1/10 of 1cm
QQuarter-millimeters1Q = 1/4 of 1mm
inInches1in = 2.54cm
pcPicas1pc = 1/16 of 1in
ptPoints1pt = 1/72 of 1in
pxPixelsDepends on the screen resolution

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

2.1- Pixel (Px)

В цифровом изображении (digital imaging), Pixel (Пиксель) является аббревиатурой фразы Picture Element, это физическая точка изображения Raster (Raster Image). Raster это техника создания изображения, разделив изображение на сетки маленьких квадратов, каждый квадрат имеет опредленный цвет и является минимальной едницей для создания цифрового изображения.

Чем больше имеется в одном Inch пикселей (pixel), тем яснее изображение. Единица Pixel не имеет определенного физического значения, она зависит от плотности пикселей (pixel density), или сказать по другому зависит от разрешения экрана (screen resolution) устройства.

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

Текущие распространенные экраны используют разрешение 96 DPI, это значит в одном Inch имеется 96 пикселей или в 1 Centimet имеется примерно 37.79 пикселей.

Ссылка ниже поможет вам конвертировать единицы INCH, CM в соответствующие PIXEL с разными разрешениями (resolution):

  • https://www.pixelto.net/inches-to-px-converter
  • https://www.pixelto.net/cm-to-px-converter

Смотрите так же:

3- Относительные единицы длины

Относительные единицы длины (relative length units) распространенно используютсяя в CSS, помогает вам настроить относительный размер по отношению к определенному элементу. Например вы хотите, чтобы размер шрифта дочернего элемента была в 2 раза больше, чем размер шрифта родительского элемента, используйте единицу EM.

.child  {
   font-size: 2em;
}

UnitRelative to
(Отностительно к)
emРазмер шрифта родительского элемента.
remРазмер шрифта коренного элемента (Элемент HTML)
exx-height шрифта элемента.
chШирина глифа (glyph) «0» шрифта текущего элемента.
lhline-height элемента.
vw1% ширины у Viewport.
vh1% высоты у Viewport.
vminМинимальное значение из 2-х значений: vw, vh.
vmaxМаксимальное значение из 2-х значений: vw, vh.

3.1- EM

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

Например родительский элемент имеет размер шрифта: {font-size: 15px} и текущий элемент (дочерний элемент) имеет размер шрифта {font-size: 2em}, при этом 1em = 15px, то есть 2em = 30px.

Например родительский элемент имеет размер шрифта: {font-size: 15px}, текущий элемент (дочерний элемент) имеет ширину: {width: 10em}, при этом 1em = 15px, тогда 10em = 150px. Тогда текущий элемент будет иметь ширину 150px.

Пример размра шрифта с единицей длины EM:

unit-em-example.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS font-size</title>
    <meta charset="UTF-8"/>
    <style>
       span {
          font-size: 2em;
       }
    </style>
</head>
<body>
    <h4>CSS font-size (Unit: em)</h4>
    Default font size (Font size of body).  <br/>
    <span>
       Span (1)
       <span>
           Span (1.1)
           <span> Span (1.1.1)</span>
       </span>
    </span>
</body>
</html>

Например, используем единицу длины EM с font-size, padding, margin, width, height,..

3.2- REM

REM это относительная единица длины. 1REM это размер шрифта корневого элемента (Root Element) — <HTML>.

Например корневой элемент (root element) HTML имеет размер шрифта: {font-size: 15px} и текущий элемент имеет размер шрифта {font-size: 2rem}, при этом 1rem = 15px, тогда 2rem = 30px.

Например родительский элемент имеет размер шрифта: {font-size: 15px}, текущий элемент (дочерний элемент) имеет ширину: {width: 10rem}, при этом 1rem = 15px, тогда 10rem = 150px. Тогда текущий элемент будет иметь ширину 150px.

Пример размера шрифта с единицей длины REM:

unit-rem-example.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS font-size</title>
    <meta charset="UTF-8"/>
    <style>
       html  {
          font-size: 15px;
       }
    </style>
</head>
<body>
    <h4>CSS font-size (Unit: rem)</h4>
    Default font size (Font size of body). <br/><br/>
    <span>
       Span (1)
       <span>
           Span (1.1)
           <span> Span (1.1.1)</span>
       </span>
    </span>
</body>
</html>

Пример использования единицы длины REM с font-size, padding, margin, width, height,..

3.3- EX

EX это относительная единица, имеет значение равное x-height шрифта текущего элемента.

3.

4- CH

EX это относительная единица. Это ширина глифа (glyph) «0» шрифта текущего элемента.

3.5- LH

LH это относительная единица, 1LH имеет значение раное line-height текущего шрифта.

** Это единица измерения в процессе тестирования, поэтому не имеется поддерживающего браузера.

line-height определяет расстояние между базовой линией (baseline) двух строк. Базовая линия это в конце почти всех букв.

  • CSS line-height

3.6- VW, VH

VW

VW это аббревиатура Viewport Width, 1VW имеет значение 1% ширины у Viewport.

VH

VH эо аббревиатура Viewport Height, 1VH имеет значение 1% высоты Viewport.

Пример с VW, VH:

vw-vh-example.html

<!DOCTYPE html>
<html>
<head>
    <title>Unit: VW, VH</title>
    
    <meta charset="UTF-8"/>
     <style>
       . my-div {
          width: 50VW;
          height: 50VH;
          padding: 5px;
          background-color: #ddd;
       }
    </style>
</head>
<body>
    <h4>Unit: VW, WH</h4>
    <div class = "my-div">
         {<br>
         width:50vw; <br>
         height: 50wh;<br>
         }
    </div>
</body>
</html>
  • Try It!

3.7- VMIN, VMAX

VMin

VMIN это аббревиатура Viewport Minimum, VMIN является минимальным значением среди 2-х значений VW и VH.

VMax

VMAX это аббревиатура Viewport Maximum, VMAX это максимальное значение среди 2-х значений VW и VH.

Всем привет. Такой вопрос. Почему проценты предпочтительней использовать чем vw и vh ? / HTML/CSS — русскоговорящее сообщество

React — русскоговорящее с. ..

Binance Russian

Android Developers

Python

Vue.js — русскоговорящее …

supapro.cxx

GNU/Linux Help

DotNetRuChat

Telegram Developers

Node. js — русскоговорящее…

DevOps — русскоговорящее …

JavaScript Noobs — сообще…

Django [ru]

Go-go!

Angular — русскоговорящее…

phpGeeks

Kubernetes — русскоговоря…

Laravel Pro

pgsql – PostgreSQL

iOS Developers — русского. ..

Смотреть еще

и vh ?

russian programming html

8 ответов
Похожие вопросы

Всем привет, кто-то может подсказать как в css изменять только родительский элемент без дочерних?

programming html russian

Привет. На всем сайте если нажать на любой текст появляется такая штука. Будто там инпут. Что такое может быть?

programming html russian

А что именно ты не понимаешь?

programming html russian

А должны?

programming html russian

Внутри таблицы использую для первого элемента flexbox. После этого он не во всю высоту. Как исправить?

programming html russian

Как сделать, чтобы точки от элементов <li> были друг под другом?

programming html russian

Хотел спросить, этот чат только по html и css? Или частично задевает ещё и js?

programming html russian

мб есть чаты по гиту? я их пойду заебу

programming html russian

начал учить hlml + css, буквально на днях, информация вроде как идет легко (имел опыт небольшой в программировании, да и английский на уровне), вопрос такой, стоит ли брать пл. ..

programming html russian

Натыкался кто на записи по верстке сайтов из серии казино или рулетки кейсов?

programming html russian

Смотреть еще

CSS Units-в чем разница между vh/vw и %?

Я только что узнал о новом и необычном блоке CSS. vh и vw измерьте процент высоты и ширины видового экрана соответственно.

Я посмотрел на этот вопрос из переполнения стека, но это сделало блоки еще более похожими.

как работает vw и VH unit

ответ, в частности, говорится:

vw и vh-это процент от ширины и высоты окна,
соответственно: 100vw-100% за ширина, 80вв 80%, ЕТК.


это похоже на то же самое, что и % блок, который более общий.

в инструментах разработчика я попытался изменить значения с vw / vh на % и viceversa и получил тот же результат.

есть ли разница между двумя? Если нет, то почему эти новые единицы были введены в CSS3?

335   4  

cssviewport-units

100% может быть 100% высоту чего-либо. Например, если у меня есть родитель div это 1000px высокий, и ребенок div, что составляет 100% высота, то, что ребенок div теоретически может быть намного выше, чем высота окна просмотра, или намного меньше, чем высота окна просмотра,хотя div установлен в размере 100% высота.

если я вместо этого сделаю этого ребенка div установлена в размере 100vh, потом только заполнить 100% высоты окна просмотра, и не обязательно родитель div.

посмотреть этот jsfiddle:

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;
}

Я знаю, что вопрос очень старый и @Josh Beam обратился к самой большой разнице, но есть еще один:

Предположим, у вас есть <div>, прямым потомком <body> что вы хотите заполнить весь видовой экран, так что вы используете width: 100vw; height: 100vh;. Все это работает так же, как 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>

Фольксваген (вид-ширина) и VH (вид высоты) единицы реляционной вид-размер порта, где 100vw или VH составляет 100% от просмотра-порт ширину/высоту.

например, если вид-порт имеет ширину 1600px, и вы указываете что-то как 2vw, это будет эквивалентно 2% ширины вид-порта или 32px.

% единица всегда основана на ширине родительского элемента текущего элемента

Спасибо за ваш ответ и пример кода, @IanC. Это мне очень помогло. Пояснение: Я считаю, что вы имели в виду «полоса прокрутки», когда вы написали «боковая панель.»

вот некоторые связанные обсуждения о единицах просмотра подсчета полос прокрутки, которые я также нашел полезными:

  • почему vw включает полосу прокрутки в качестве части окна просмотра?

  • использование 100vw вызывает горизонтальную обрезку, когда вертикальные полосы прокрутки настоящее

  • предотвратить 100vw от создания горизонтальной прокрутки

  • разница между шириной: 100% и шириной: 100vw?

The W3C spec для VW, vh, vmin, vmax единиц («видовой экран процент длины») говорит «любые полосы прокрутки, как предполагается, не существует».

по-видимому Firefox вычитает ширину полосы прокрутки из 100vw, как комментарий @Nolonar на разница между шириной: 100% и шириной: 100vw? наблюдает, цитируя «могу ли я использовать».

Могу Я Использовать, возможно, в напряжении со спецификацией (?), говорит, что все браузеры, кроме Firefox, в настоящее время» неправильно » считают, что 100vw-это вся ширина страницы, включая вертикальную полосу прокрутки.

Изучите единицы CSS — Em, Rem, VH и VW с примерами кода ✨✨

Сегодня мы узнаем, как использовать единицы CSS EM, REM, VW и VH, работая с некоторыми практическими примерами. Мы также увидим, как создавать адаптивные веб-сайты с помощью этих модулей.

Начнем. 💖

  • Зачем учить относительные единицы?
  • Что такое единицы REM?
  • Как сделать адаптивные веб-сайты с помощью единиц REM
  • Что такое единицы EM?
  • Что такое VW единиц?
  • Что такое блоки VH?
  • Дополнительные ресурсы
Рассмотренные темы

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

REM, EM, VW, VH являются относительными единицами . Если вы объедините их с медиа-запросами, вы сможете создавать идеально масштабируемые макеты. Посмотрите на этот GIF 👇 Текст отображается на экранах компьютеров, планшетов и мобильных устройств!

Шрифт с использованием модуля REM

Имейте в виду, что пикселя являются абсолютными единицами измерения. Они не изменятся при изменении размера окна. Посмотрите на этот GIF 👇 Обратите внимание, что размер шрифта 50px не меняется на при изменении размера окна.

Шрифт, использующий единицу измерения Pixel

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

Сначала скопируйте код из этой ссылки Code Pen и вставьте его в VS Code или любой другой редактор кода. Затем выполните следующие действия:👇

  • создайте папку с именем project-1
  • создайте файлы HTML, CSS, JS и свяжите их вместе
  • установите необходимые нам плагины – px to rem и Live server
  • Запустите live server
Тестирование начальных файлов

Как вы можете видеть на картинке выше, 👆 JavaScript выполняет все вычисления, поэтому нам просто нужно сосредоточиться на руководстве. Мы просто изменим CSS и поэкспериментируем с разными значениями.

Начнем программировать!

Блок REM зависит от корневого элемента [элемент HTML ]. Вот изображение, чтобы показать вам, как это работает: 👇

Размер шрифта корневого элемента по умолчанию

Размер шрифта корневого элемента по умолчанию [в HTML] составляет 16 пикселей. Итак, 1 REM = 16px.

Если мы напишем 3 rem, это покажет нам [ 3*16px = 48px ] . Как видите, работает как множитель.

эксперименты с 3 rem

Но, если мы изменим размер шрифта корневого элемента, единица REM изменится – вот так: 👇

изменен размер шрифта корневого элемента

Мы устанавливаем размер шрифта HTML на 50px.

Теперь, если мы напишем 3 rem, он покажет нам [ 3 * 50px = 150px ] вот так: 👇

экспериментируем с 3 rem

Давайте воссоздадим результаты с кодом и посмотрим их варианты использования на практике. 👇

Во-первых, давайте поэкспериментируем с размером шрифта по умолчанию для каждого веб-сайта, который составляет 16 пикселей. И мы установим размер шрифта класса .text равным 1 rem.

 HTML {
  размер шрифта: 16px;
}
.текст {
  размер шрифта: 1rem;
}
/** Расчеты
 1 бэр * 16px = 16px
**/

Вот что получилось: размер шрифта: 16px; } . текст { размер шрифта: 2rem; } /** Расчеты 2 рем * 16px = 32px **/

И вот результат: 👇

Размер шрифта 2 rem, корень 16px

Как видите, размер шрифта увеличивается, но ширина остается прежней (1536px).

Как изменить размер корневого шрифта

Теперь давайте поэкспериментируем, изменив размер корневого шрифта, который находится внутри html. Сначала напишите этот код, чтобы получить результат по умолчанию: 👇

 html {
  размер шрифта: 16px;
}
.текст {
  размер шрифта: 1rem;
}
/** Расчеты
 1 бэр * 16px = 16px
**/

Вот как это выглядит:👇

Настройка по умолчанию 

Теперь измените размер корневого шрифта на 40px следующим образом:

 html {
  размер шрифта: 40px;
}
.текст {
  размер шрифта: 1rem;
}
/** Расчеты
 1 бэр * 40px = 40px
**/

Вот результат: 👇

корневой элемент 40px

Теперь измените размер шрифта .text на 2 rem: 👇

 html {
  размер шрифта: 40px;
}
. текст {
  размер шрифта: 2rem;
}
/** Расчеты
 2 рем * 40px = 80px
**/

И вы можете увидеть результат: 👇

Результат

Так как мы изменили размер корневого шрифта на 40px, когда мы изменим размер шрифта .text на 2 rem, мы получим 2*40 = 80px.

Создание адаптивных веб-сайтов с помощью модуля REM очень просто. Просто напишите свои стили в единицах rem вместо пикселей и измените корневых элементов в разных точках останова с помощью медиа-запросов.

Вот демонстрация, показывающая, как это делается👇 и как добавлять медиа-запросы:

 // большой экран
@media (максимальная ширина: 1400 пикселей) {
  HTML {
    размер шрифта: 25px;
  }
}
// Экран планшета
@media (максимальная ширина: 768 пикселей) {
  HTML {
    размер шрифта: 18 пикселей;
  }
}
// Мобильный экран
@media (максимальная ширина: 450 пикселей) {
  HTML {
    размер шрифта: 12px;
  }
}

Теперь установите для класса .text значение 3 rem, например:

 . text{
размер шрифта: 3rem;
}

И вот результат: 👇

Вот расчеты:
  • Для большого экрана  -> 3 rem * 25px = 75px
  • Для экрана планшета        -> 3 rem * 18px = 1 4 9001 экран для мобильного > 3 rem  * 12px = 36px
  • Настройка по умолчанию            -> 3rem * 16px = 48px

Единица EM такая же, как единица REM , но это зависит от размера родительского шрифта . Вот демо. 👇

Примечание : убедитесь, что вы удалили все медиа-запросы.

 HTML {
  размер шрифта: 16px;
}
.текст {
  размер шрифта: 3em;
}
/** Расчеты
  размер шрифта должен быть
  3 см * 16 пикселей = 48 пикселей
**/

Вот результат: 👇

Теперь попробуем добавить 3em padding к классу .text.

 HTML {
  размер шрифта: 16px;
}
.текст {
  размер шрифта: 3em;
  набивка: 3ЭМ;
}
/** Расчеты
текст => 3em * 16px = 48px
отступ => 3em * 3em * 16px = 144px
**/

Вместо отступа 48px мы получаем отступ 144px. Как видите, получается , умноженное на на предыдущее число.

результат заполнения 3em

Вот вычисленная часть из консоли разработчика: 👇

3em дополнение к нашему тексту

Не используйте единицу измерения EM :

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

Полная форма VW ширина окна просмотра . Он работает как процентная единица . Указание 10vw эквивалентно занятию 10% всей видимой ширины экрана.

Чтобы поэкспериментировать с результатами, внесите эти изменения в свой CSS👇

Примечание: прокомментируйте последнюю строку в классе .box.

 .текст {
  дисплей: нет;
}
.коробка {
  ширина: 50vw;
  
  высота: 300 пикселей;
  /* отображение: нет; */
}

Если вы посмотрите внимательно, то увидите, что 50vw означает 50%, , что покрывает половину всей ширины экрана.

В части JavaScript раскомментируйте эту строку в самом конце: 👇

 // Ширина и высота блока
  box.innerHTML = "Ширина: " + Box_width;
  
  // box.innerHTML = "Высота:" + Box_height;

Результат выглядит так:👇

50vw занимает 50% ширины экрана

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

Посмотрите на эту демонстрацию, чтобы увидеть, как это работает:👇

 .text {
  дисплей: нет;
}
.коробка {
  ширина: 300 пикселей;
  
  высота: 50вх;
   /* отображение: нет; */
}

Если вы посмотрите внимательно, то увидите, что 50vh означает 50%, , что покрывает половину всей высоты экрана.

В части JavaScript раскомментируйте эту строку в самом конце: 👇

 // Ширина и высота блока
  // box. innerHTML = "Ширина:" + Box_width;
  
  box.innerHTML = "Высота:" + Box_height;

Также внесите следующие изменения:👇

 // Размер экрана (ширина и высота)
  // size.innerHTML = "Ширина: " + Ширина + " пикселей";
  size.innerHTML = "Высота: " + Высота + " пикселей";

И вот результат: 👇

50vh занимает 50% экрана Высота

Как видите, он всегда будет занимать столько места, даже если мы изменим размер окна.

Коробка изменения размера размером 50vh

Вот и все!

Поздравляем! Теперь можно с уверенностью использовать блоки REM, EM, VW и VH для создания веб-сайтов с идеальной отзывчивостью.

Вот твоя медаль 🎖️ за успешное прочтение до конца. ❤️

  • Полное руководство по мультимедийным запросам
  • Images from Freepik

Suggestions & Criticisms are Highly Appreciated ❤️️

  • YouTube / JoyShaheb
  • LinkedIn / JoyShaheb
  • Twitter / JoyShaheb
  • Instagram / JoyShaheb

Научитесь программировать бесплатно. Учебная программа freeCodeCamp с открытым исходным кодом помогла более чем 40 000 человек получить работу в качестве разработчиков. Начать

CSS Viewport Units: Quick Start

HTML и CSS

    CSS

,

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *