Надеюсь, это статья на продвинутую тему, которая погружается в px, em и rem.
Страницы с фиксированной шириной и страницы с адаптивной шириной
Чтобы прояснить разницу между px, em и rem, мы должны начать с этой темы.
На самом деле, я сначала не мог понять фиксированную ширину страницы.
Следующая страница JD.com отображается на экране с разрешением 1080*1920.
Следующая страница JD.com отображается на 14-дюймовом ноутбуке с разрешением 1366*728.
Когда я знаю, что ширина сайта jd одинакова при разных разрешениях, я чувствую себя очень странно. Разве это не должно быть адаптировано? Но мне нечего сказать, когда я вижу, что большие заводы делают это именно так.
Если вы занимались разработкой под Android, то знаете, что приложения для Android должны быть адаптированы к экрану, и если они не будут совпадать, то отображение будет ненормальным. На самом деле, никто не прав или не прав, это просто компромисс. Просто разные платформы обрабатывают его по-разному, и этому есть много причин. Например, причина в операционной системе. Собственная система графического интерфейса Android — очень старая система. Нижний уровень этой системы графического интерфейса требует от вас адаптации, поэтому вам придется адаптироваться.
Я хочу сказать здесь, является ли проблема адаптации обязательной. Для приложений БС. Если не влезет, то проблем не будет, просто пропорционально все меньше и меньше, макет страницы не изменится, здесь мы обсуждаем только отображение на мониторе ПК, а не отображение на мобильном телефоне. И вопрос, который необходимо рассмотреть, заключается в том, установлена ли ширина 800 пикселей или 1024 пикселей, а вопрос о том, установлена ли ширина 1024 пикселей или 1280 пикселей, будет обсуждаться позже. Это не проблема, пока вы масштабируете браузер.
Если вы хотите обсудить адаптацию и отображение страниц ПК на мобильном терминале, это совсем другое дело. Вопрос уже не в адаптации или нет, а в том, разрабатывать ли мобильную версию.
Другая причина заключается в том, как думает дизайнер страницы. Фиксированная ширина для них естественна. Учитывая расширение, сложно понять и спроектировать.
На самом деле, еще одной важной причиной является вопрос дохода. Если вы должны быть адаптивными, вы должны учитывать множество вещей, например, размер изображения, который трудно контролировать. Неуместно отображать маленькое изображение на большом экране или большое изображение на маленьком экране. Вы сказали,что это не проблема.Я могу запросить картинки разного размера по соотношению.Это на самом деле сильно нагрузит сервер,и ситуация усложнится.В итоге вы можете обнаружить что усиление не стоит потери. С тем же успехом можно написать это как фиксированную ширину.
Абсолютные и относительные единицы
Если вы хотите разработать страницу с фиксированной шириной, то лучшим выбором будет абсолютная единица измерения px. Если вы хотите разрабатывать страницы с адаптивной шириной, вам необходимо учитывать относительные единицы, такие как em и rem.
Мы все слишком хорошо знакомы с единицей пикселя px. Следует отметить, что пиксель px разработки веб-сайта все же отличается от физического пикселя. Пиксели CSS строго не равны пикселям дисплея, особенно на экранах высокой четкости (экраны Retina). На некоторых экранах с чрезвычайно высоким разрешением (таких как монитор Apple 4k) операционная система принудительно увеличивает все приложения, потому что программное обеспечение с фиксированным размером, которое не увеличено, будет выглядеть очень маленьким. Но для веб-сайтов нам не нужно заботиться об этом, потому что соотношение структуры не изменится.
Em и rem являются адаптивными по отношению к тексту. является относительной единицей. Преимущество относительных единиц в том, что они могут быть адаптивными. Минус в том, что это усложнит конструкцию.
Происхождение имени Эм
Да, сначала мне было очень любопытно, какое слово em является аббревиатурой, а в официальном документе об этом не сказано. После долгой проверки итог такой:
1. em не является аббревиатурой.
2. em происходит из полиграфии.При печати необходимо учитывать размер букв, а размер M почти квадратный. Поэтому другие буквы разработаны со ссылкой на букву М в качестве стандарта. Английское произношение (фонетический символ) M - em.
История имеет смысл, и em действительно коррелирует с размером букв в CSS. Правдива ли эта история, не имеет значения.
https://www.w3cplus.com/css/rip-rem-viva-css-reference-pixel.html
Понятие и использование em
В CSS 1em равен размеру шрифта текущего элемента. Если размер шрифта не задан, размер шрифта по умолчанию составляет 16 пикселей, а 1em по умолчанию равен 16 пикселям.
#box {
display: inline-block;
padding: 1em;
}
После изменения размера шрифта значение 1em также изменилось. Теперь 1em=20px.
#box {
display: inline-block;
font-size: 20px;
padding: 1em;
}
Отрисовка текста CSS
Многие думают, что текст очень простой, можно ли его отобразить? На самом деле это не так, посмотрим эффект ниже.
На рисунке ниже так много функций, что вы можете их не заметить или неправильно понять.
1. Между левой и правой частями текста и краем div есть зазор. Если ваш текст маленький, вы можете его не увидеть и принять за цепляние.
2. Буква g внизу кажется близкой к периферии div. Но это не так, если поставить очень крупный шрифт, то видно, что с краем div все равно есть зазор. Просто небольшой зазор.
3. Хотя буква f видна, очевидно, что она все еще далеко от верхнего края div.
<div class="above">agofe</div>
.above{
display:inline;
background-color: lightblue;
font-size:500px
}
Более того, эти пробелы не могут быть устранены, потому что эти пробелы являются неотъемлемой частью текста.
Я нарисовал картинку, чтобы объяснить, почему это так.
С точки зрения высоты рисование текста CSS может не иметь верхней и нижней строк ниже. Но есть две линии подъема и спуска, соответствующие нижней и верхней части текста. Интерлиньяж представляет собой базовую линию текста.
После прочтения этой картинки нет нужды объяснять описанное выше явление.
Относительное значение em и проблемы расчета
em унаследует размер шрифта от родительского элемента в качестве базового значения.
<div id="box">
<div class="outer">
outer
<div class="inner">inner</div>
</div>
</div>
.outer{
height: 1em;
background-color: lightgreen;
width: 200px;
}
.inner{
font-size: 1.2em;
height: 1em;
background-color: lightblue;
width: 200px;
}
external наследует размер по умолчанию 16px от body. Та же высота установлена равной 1em, а высота внутреннего значительно больше, чем высота внешнего. Это связано с тем, что .inner устанавливает размер шрифта, внутренняя высота = внешняя. высота * 1,2 * внутренняя. высота.
Характеристики наследования Эм или существующие проблемы
em унаследует размер шрифта от родительского элемента в качестве базового значения. Это считается особенностью, но в то же время это очень серьезная проблема.
Приведенный выше код подходит, если сама цель состоит в том, чтобы увеличить шрифт. Проблемы могут возникнуть при наличии нескольких уровней вложенности.
Например, у меня есть многоуровневый список. Я хочу установить размер текста ul на 1.2em. Мое первоначальное намерение состоит в том, чтобы размер всех ul был 1.2em, что составляет 1.2 16px. Но тогда есть проблема. Размер шрифта ul постепенно увеличивается. Мое первоначальное намерение состояло в том, чтобы иметь тот же размер, что вызвано наследованием.Размер текста первого ul составляет 16px 1.2. Второй размер текста ul: (16px*1.2)*1.2. Также формирует эффект ступенчатого усиления.
Если эта задача не работает, CSS предоставляет нам другую единицу измерения rem, rem означает root rem, то есть согласно размеру html-тега стандартно по умолчанию 16px. Таким образом, нет явления наследования, а размер шрифта корневого элемента считается стандартным. Это может решить эту проблему многоуровневой вложенности.
ul{
font-size: 1.2em;
}
<div>
<ul>
<li>Top Level</li>
<ul>
<li>Second Level</li>
<ul>
<li>Third Level</li>
</ul>
</ul>
</ul>
</div>
Используйте rem:
чтобы он не увеличивался шаг за шагом. Конечно, если вы хотите просто шаг за шагом увеличивать масштаб, то использование em может оказаться не проблемой, а умением.
ul{
font-size: 1.2rem;
}
Установите размер шрифта и масштаб браузера
Браузер может масштабировать веб-страницу в целом. Ctrl+ или Ctrl-. Этот подход может масштабировать веб-страницу только отдельно и является временным. Не уверен, почему браузеры не поддерживают автоматическое масштабирование. Другой способ — через em. Если размер динамически изменяется в соответствии с установленным размером шрифта, этот метод является постоянным. Недостаток в том, что не все будет затронуто, например, картинки должны использовать px.
Хватит думать пикселями, нехороший трюк
Размер текста html по умолчанию 16px, и использовать em для расчета не очень удобно, например, если я хочу текст 20px, то мне нужно вычислить 20/16=1.25em. Затем кто-то может придумать способ запроса, который заключается в установке размера шрифта html на 0,625em, потому что 0,625em*16px=10px. Таким образом, если бы мне нужно было вычислить значение em, скажем, 18 пикселей, я мог бы сделать прямой вывод, что оно равно 1,8 em.
Но это типичное пиксельное мышление Это не значит, что вы не можете использовать пиксели, но что когда вы используете em, вы должны использовать относительную единицу мышления вместо того, чтобы цепляться за пиксели. Самое главное, что этот подход имеет очевидные недостатки.
1. По умолчанию 10px относительно мало.При настройке шрифта может потребоваться сброс шрифта, что очень хлопотно.
2. Суть этого подхода — пиксельное мышление. При использовании em я все еще думаю о px. Тело в Цао Ин, сердце в Хань.
Так же есть улучшенный прием:
при использовании rem можно вычислить быстро.Когда размер не прописан, размер по умолчанию тоже 16px. Это просто старая проблема, я до сих пор использую их, думая о пикселях.
html{
font-size:0.625em
}
body{
font-size:16px
}
em и адаптивный дизайн
Много лет назад, когда начальная загрузка была очень популярна, понятие отзывчивости также было очень популярным, и основной принцип фреймворков пользовательского интерфейса, таких как начальная загрузка, был реализован с использованием относительной единицы em в сочетании с @media для достижения различной ширины отображения. Различные размеры em. .
Реализованная логика аналогична следующей.
:root {
font-size: 0.75em;
}
@media (min-width: 800px) {
:root {
font-size: 1em;
}
}
@media (min-width: 1200px) {
:root {
font-size: 1.25em;
}
}
отзывчивое позиционирование
Адаптивные макеты великолепны, но помните об адаптивном позиционировании.
Адаптивный — это, по сути, веб-сайт, а не приложение. Отзывчивость — это просто эффект отображения на мобильном терминале.Если вы хотите сделать макет на мобильном терминале, это уже не область отзывчивости, а веб-версия приложения.
А отечественные могут не написать веб-версию апп, а сделать это небольшой программкой. Поскольку пользователи фактически адаптировались к работе мобильного терминала, они не привыкли к адаптивному скрытому меню.
Однако с точки зрения экономии затрат отзывчивость также можно рассматривать как приложение. Ведь при написании мобильного терминала нужно много чего доработать.
Подведем итог
Возвращаясь к заголовку, если вам нужно сказать, в чем разница между px, em и rem, статья уже проанализировала их все.
1.px — это фиксированная единица, а em и rem — относительные единицы
2.em и rem могут реализовывать адаптивные функции, которые являются более гибкими и сложными. px относительно проще.
3.em, rem и размер шрифта связаны.