Обычно, когда мы хотим установить элемент для заполнения экрана, мы можем установить длину и ширину этого элемента равными100%, Код CSS выглядит следующим образом
.block {
height: 100%;
width: 100%;
}
Скопировать код
Хорошо, как вы думаете, это будет сделано?
НЕТ! Как это возможно! Будет ли так просто заполнить экран? Проверил вашhtmlbodyЭто высота и ширина? а это не100%, ОК, даже если эти двое уже100%А как насчет вашего объекта-контейнера? Таким образом, полный CSS будет записан так
Хорошо, теперь все должно быть ОК, НЕТ! как это возможно! Теперь вы ограничиваете высоту и ширину этого контейнера. Что делать, если содержимое страницы превышает ограничения по высоте и ширине? Тогда твой
100%Дело не в размере экрана.
Другая проблема — это метод позиционирования. Если другие ваши элементы используютfixedabsolutedrelative Или использовалfloat:leftfloat:rightДождитесь позиционирования, тогда исходная высота коробки будет уничтожена, даже если она установлена100%Возможно, он не сможет заполнить весь экран.
Есть решение? Конечно, вы можете использовать CSScalcПриходите рассчитывать длину и ширину динамически, но здесь есть проблемы с производительностью.calcЕго необходимо вычислять каждый раз, когда изменяется стиль CSS, что потребляет много производительности.
Можете ли вы использовать JS для его динамической настройки? Конечно, есть много готовых библиотек.
но! Сегодня я собираюсь представить собственный CSS, и это очень удобно! То естьvw с участием vhБрат, давай посмотрим, как они его используют
. block {
width: 100vw;
height: 100vh;
}
Скопировать код
Хорошо, код закончен. Теперь мы реализовали реализацию, занимающую весь экран. Нам не нужно знать размер нашего контейнера. В любом случае, очень сложно настроить его так, чтобы он занимал весь экран.
Давайте посмотрим на эти две единицыvw = viewport widthvh = 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Способ использования производительности; содер…
Эта часть представляет собой ссылку на блоги, которые вы читали в лабораторном здании, и вы обычно читаете ее, потому что вы можете избежать создания среды в лабораторном здании, и вы можете начать пр…
Вам также может понравиться
Почему 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,. .. Но есть некоторые рекомендации для вашего использования:
Recommended (Рекомендуется)
Occasional use (Для постоянного использования)
Not recommended (Не рекомендуется)
Screen (Экран)
em, px, %
ex
pt, cm, mm, in, pc
Print (Печать)
em, cm, mm, in, pt, pc, %
px, ex
Примечание: Есть некоторые единицы, которые на данный момент в процессе тестирования, поэтому многие браузеры не поддерживают. Вам нужно быть осторожным при их использовании.
В основном, единицы измерения делятся на 2 вида: Единица абслютной длины и единица относительной длины.
2- Единица абсолютной длины
Единица абсолютной длины часто используется в CSS, она поможет вам настроить точный размер.
Unit
Name
Equivalent to
cm
Centimeters
1cm = (1/2. 54) of 1in
mm
Millimeters
1mm = 1/10 of 1cm
Q
Quarter-millimeters
1Q = 1/4 of 1mm
in
Inches
1in = 2.54cm
pc
Picas
1pc = 1/16 of 1in
pt
Points
1pt = 1/72 of 1in
px
Pixels
Depends 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;
}
Unit
Relative to (Отностительно к)
em
Размер шрифта родительского элемента.
rem
Размер шрифта коренного элемента (Элемент HTML)
ex
x-height шрифта элемента.
ch
Ширина глифа (glyph) «0» шрифта текущего элемента.
lh
line-height элемента.
vw
1% ширины у Viewport.
vh
1% высоты у 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 с 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.
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.
Я знаю, что вопрос очень старый и @Josh Beam обратился к самой большой разнице, но есть еще один:
Предположим, у вас есть <div>, прямым потомком <body> что вы хотите заполнить весь видовой экран, так что вы используете width: 100vw; height: 100vh;. Все это работает так же, как width: 100%; height: 100vh; пока вы не добавите больше контента и не появится вертикальная боковая панель. Так как vw учетная запись боковой панели как часть окна просмотра,width: 100vw; будет немного больше, чем width: 100%;. Это небольшая разница заканчивается добавлением горизонтальной боковой панели (требуется, чтобы пользователь видел эту небольшую дополнительную ширину), и, следовательно, высота также будет немного отличаться в обоих случаях.
это необходимо учитывать при принятии решения о том, какой из них использовать, даже если размер родительского элемента совпадает с размером окна просмотра документа.
Фольксваген (вид-ширина) и 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
Если вы хотите сделать адаптивных веб-сайтов очень легко, быстро и эффективно, тогда вам обязательно нужно изучить относительные единицы 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 означает 50%, , что покрывает половину всей ширины экрана.
В части JavaScript раскомментируйте эту строку в самом конце: 👇
// Ширина и высота блока
box.innerHTML = "Ширина: " + Box_width;
// box.innerHTML = "Высота:" + Box_height;
Результат выглядит так:👇
50vw занимает 50% ширины экрана
Как видите, этот элемент всегда будет занимать столько места, даже если мы изменим размер окна . Он также работает как процентная единица . Указание 10vh эквивалентно занятию 10% всей видимой высоты экрана.
Посмотрите на эту демонстрацию, чтобы увидеть, как это работает:👇
Если вы посмотрите внимательно, то увидите, что 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 человек получить работу в качестве разработчиков. Начать