Принципиальный анализ Rem Layout

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

Что такое Рем

REM EM и легко смущены, на самом деле, являются двумя единицами CSS, а также являются относительными единицами, существующие EM, CSS3 были введены REM, REM перед введением, мы начинаем понимать на них

Когда em используется в качестве единицы размера шрифта, он представляет размер шрифта родительского элемента, а когда em используется в качестве другой единицы атрибута, он представляет собственный размер шрифта — MDN

Я часто задаю вопрос, связанный с em во время интервью, чтобы увидеть, насколько хорошо интервьюируемый понимает детали CSS, а именно: сначала спросите, сколько пикселей составляют размер шрифта и высота строки для s1, s2, s5 и s6 соответственно. Если подумать, в конце есть ответы и пояснения.

<div class="p1">
	<div class="s1">1</div>
  	<div class="s2">1</div>
</div>
<div class="p2">
	<div class="s5">1</div>
  	<div class="s6">1</div>
</div>

.p1 {font-size: 16px; line-height: 32px;}
.s1 {font-size: 2em;}
.s1 {font-size: 2em; line-height: 2em;}

.p2 {font-size: 16px; line-height: 2;}
.s5 {font-size: 2em;}
.s5 {font-size: 2em; line-height: 2em;}

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

Некоторые люди предлагают использовать em для создания гибких макетов страниц, но его сложный расчет подвергается критике, а некоторые люди даже специально делают px и em.калькулятор, значения em, соответствующие значениям пикселей разных узлов, o(╯□╰)o

Недостатком гибкой компоновки em является то, что она влияет на все тело, как только размер шрифта узла изменяется, его элементы-потомки должны быть пересчитаны, X﹏X

Когда rem действует на некорневой элемент, это относительно размера шрифта корневого элемента; когда rem действует на размер шрифта корневого элемента, это относительно начального размера шрифта - MDN

Значение rem делится на два случая, когда оно устанавливается на корневой элемент и когда оно устанавливается на некорневой элемент, например

/* 作用于根元素，相对于原始大小（16px），所以html的font-size为32px*/
html {font-size: 2rem}

/* 作用于非根元素，相对于根元素字体大小，所以为64px */
p {font-size: 2rem}

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

Я всегда чувствую, что em рождается для шрифтов и высоты строки Иногда шрифт дочернего элемента должен быть относительно родительского элемента, а высота строки элемента должна быть относительно размера шрифта, а точка rem — это единая справочная система

Принцип компоновки рем

В чем суть rem макета? Это вопрос, который я задавал многим людям, и ответы, которые я получил, не были удовлетворительными.

На самом деле, суть макета REM равна масштабированию, обычно основанной на ширине. Представьте себе, если карта UE может подождать больше, чем увеличить, то насколько это красиво

Предположим, мы делим ширину экрана на 100 равных частей, ширина каждой части представлена ​​x, x = ширина экрана / 100, если x используется в качестве единицы измерения, значение перед x представляет собой процент от ширины экрана.

p {width: 50x} /* 屏幕宽度的50% */ 

Если вы хотите, чтобы элементы страницы менялись пропорционально ширине экрана, нам понадобится единица x выше. К сожалению, в css такой единицы нет. К счастью, в css есть rem. Через мост rem магический x можно осуществленный

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

html {font-size: 16px}
p {width: 2rem} /* 32px*/

html {font-size: 32px}
p {width: 2rem} /*64px*/

Если размер шрифта элемента html постоянен и равен 1/100 ширины экрана, то 1rem и 1x эквивалентны

html {fons-size: width / 100}
p {width: 50rem} /* 50rem = 50x = 屏幕宽度的50% */ 

Как сделать размер шрифта html всегда равным одному проценту от ширины экрана? Может быть установлен с помощью js, как правило, необходимо установить готовый дом страницы, изменить размер и повернуть экран.

document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + 'px'; 

Итак, как преобразовать значение единицы пикселя, полученное в изображении UE, в значение единицы rem? Формула представляет собой ширину элемента / ширину карты UE * 100, давайте возьмем пример, предположим, что размер карты UE составляет 640 пикселей, а ширина элемента в карте UE составляет 100 пикселей, согласно формуле 100/640 * 100 = 15,625.

p {width: 15.625rem}

Давайте проверим правильность приведенного выше расчета.В следующей таблице представлена ​​ширина элемента при пропорциональном масштабировании диаграммы UE.

|Ширина карты UE |Ширина элемента карты UE |

| ----- | -------- |

| 640px | 100px |

| 480px | 75px |

| 320px | 50px |

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

|ширина страницы |размер шрифта html |ширина элемента p |

| ----- | --------------- | ---------------- |

| 640px | 640/100 = 6.4px | 15.625*6.4=100px |

| 480px | 480/100=4.8px | 15.625*4.8=75px |

| 320px | 320/100=3.2px | 15.625*3.2=50px |

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

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

$ue-width: 640; /* ue图的宽度 */

@function px2rem($px) {
  @return #{$px/$ue-width*100}rem;
}

p {
  width: px2rem(100);
}

Результат компиляции приведенного выше кода выглядит следующим образом

p {width: 15.625rem} 

На самом деле, после наличия постксса этот процесс надо поставить в постксс, исходник такой

p {width: 100px2rem} 

Postcss будет обрабатывать блок px2rem.Результат после обработки следующий.Если вам интересно, напишите postcss плагин для px2rem.

p {width: 15.625rem} 

Лучшее решение, чем Rem

Как упоминалось выше, если вы хотите, чтобы элементы страницы менялись в зависимости от ширины страницы, вам нужна новая единица измерения x, где x равно 1% ширины экрана.CSS3 предоставляет как rem, так и vw и vh.

vw - 1/100 ширины области просмотра vh - 1/100 высоты области просмотра - MDN

Вы можете быть умным, когда узнаете, не является ли это единицей x? Да, согласно определению, мы можем найти, что 1vw = 1x. С vw мы можем полностью обойти посредника rem. Следующие две схемы эквивалентны , видно vw Проще, чем rem, в конце концов, rem это реализация vw?

/* rem方案 */
html {fons-size: width / 100}
p {width: 15.625rem}

/* vw方案 */
p {width: 15.625vw}

vw также можно комбинировать со схемой rem, так что вам не нужно использовать js для расчета размера шрифта html

html {fons-size: 1vw} /* 1vw = width / 100 */
p {width: 15.625rem}

Хотя у vw есть различные преимущества, vw также имеет недостатки.Во-первых, совместимость vw не так хороша, как у rem.Пожалуйста, проверьте ее перед использованием.

|Совместимость |Иос |Андроид |

| ---- | ---- | ---- |

| rem | 4.1+ | 2.1+ |

| vw | 6.1+ | 4.4+ |

Кроме того, при использовании гибкой верстки максимальная ширина вообще ограничена, например, при просмотре нашей страницы на стороне пк, vw в это время ничего не может сделать, потому что нет другого блока, кроме ширины, у которого есть max-width , а rem может управлять html максимальным размером шрифта корневого элемента и легко решить эту проблему

Рем не серебряная пуля

rem — это реализация гибкого макета. Гибкий макет можно рассматривать как тип адаптивного макета, но адаптивный макет не является гибким макетом. Гибкий макет делает упор на пропорциональное масштабирование и 100% восстановление; адаптивный макет подчеркивает, что разные экраны должны быть разными. display, такие как медиа-запросы

Есть две отправные точки для пользователей, чтобы выбрать большой экран: некоторые люди хотят более крупные шрифты и более крупные изображения, такие как я с пресбиопией; некоторые люди хотят больше контента, но не хотят больших значков; некоторые люди хотят зеркало. . . —— Ян Хайцзин

Я думаю, что веб-сайты, основанные на обычном контенте, не подходят для использования rem, потому что пользователи с большим экраном могут выбирать, хотят ли они более крупные шрифты или больше контента. Использование rem лишит пользователей свободы. Например, Baidu знает, В опыте Baidu не используется rem-макет; некоторые смещены в сторону приложений, значков и типов изображений, таких как Taobao, страницы активности, и лучше использовать rem, потому что невозможно увеличить размер значка при увеличении. размер шрифта.

rem можно добиться 100% сокращения, но себестоимость производства rem также выше.В то же время есть некоторые проблемы с использованием rem.Перечислим их по порядку:

Во-первых, это проблема шрифтов.Размер шрифта не может использовать rem, а размер шрифта и ширина шрифта нелинейны, поэтому размер шрифта не может использовать rem; поскольку установлен размер шрифта корневого элемента, он повлияет на все элементы для которых не установлен размер шрифта. Поскольку размер шрифта будет унаследован, вы хотите, чтобы каждый элемент отображал установленный размер шрифта? ? ?

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

html {fons-size: width / 100}
body {font-size: 16px} 

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

@media screen and (min-width: 320px) {
	body {font-size: 16px}
}
@media screen and (min-width: 481px) and (max-width:640px) {
	body {font-size: 18px}
}
@media screen and (min-width: 641px) {
	body {font-size: 20px}
}

p {font-size: 1.2em}
p a {font-size: 1.2em}

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

var clientWidth = document.documentElement.clientWidth;
clientWidth = clientWidth < 780 ? clientWidth : 780;
document.documentElement.style.fontSize = clientWidth / 100 + 'px';

Установите ширину тела на 100rem и отцентрируйте его по горизонтали.

body { margin: auto; width: 100rem } 

В-третьих, что если пользователь отключит js? На самом деле таких пользователей не много, так что опустим. . .

Во-первых, вы можете добавить тег noscript, чтобы предложить пользователю

<noscript>开启JavaScript，获得更好的体验</noscript> 

Добавьте размер шрифта по умолчанию 320 в html, чтобы страница могла отображаться.

html {fons-size: 3.2px} 

Если вы хотите улучшить работу, добавьте медиа-запросы.

@media screen and (min-width: 320px) {
	html {font-size: 3.2px}
}
@media screen and (min-width: 481px) and (max-width:640px) {
	html {font-size: 4.8px}
}
@media screen and (min-width: 641px) {
	html {font-size: 6.4px}
}

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

Схема компоновки рем

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

Однако проблема с приведенной выше схемой все же есть, то есть если ее разделить на 100 частей, при условии, что ширина экрана 320, размер html в это время 3.2px, но минимальный размер шрифта, поддерживаемый браузером составляет 12 пикселей, что мне делать? Затем разделите его на 10 частей, просто замените 100 выше на 10.

Ниже приведен полный пример.Вычисление CSS не использует препроцессор.Это очень просто.

HTML-код выглядит следующим образом

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <title>rem布局</title>
</head>
<body>
    <noscript>开启JavaScript，获得更好的体验</noscript>

    <div class="p1">
        宽度为屏幕宽度的50%，字体大小1.2em
        <div class="s1">
            字体大小1.2.em
        </div>
    </div>

    <div class="p2">
        宽度为屏幕宽度的40%，字体大小默认
        <div class="s2">
            字体大小1.2em
        </div>
    </div>
</body>
</html>

Код css выглядит следующим образом

html {
    font-size: 32px; /* 320/10 */
}
body {
    font-size: 16px; /* 修正字体大小 */
    /* 防止页面过宽 */
    margin: auto;
    padding: 0;
    width: 10rem;
    /* 防止页面过宽 */
    outline: 1px dashed green;
}

/* js被禁止的回退方案 */
@media screen and (min-width: 320px) {
    html {font-size: 32px}
    body {font-size: 16px;}
}
@media screen and (min-width: 481px) and (max-width:640px) {
    html {font-size: 48px}
    body {font-size: 18px;}
}
@media screen and (min-width: 641px) {
    html {font-size: 64px}
    body {font-size: 20px;}
}

noscript {
    display: block;
    border: 1px solid #d6e9c6;
    padding: 3px 5px;
    background: #dff0d8;
    color: #3c763d;
}
/* js被禁止的回退方案 */

.p1, .p2 {
    border: 1px solid red;
    margin: 10px 0;
}

.p1 {
    width: 5rem;
    height: 5rem;

    font-size: 1.2em; /* 字体使用em */
}

.s1 {
    font-size: 1.2em; /* 字体使用em */
}

.p2 {
    width: 4rem;
    height: 4rem;
}
.s2 {
    font-size: 1.2em /* 字体使用em */
}

js-код выглядит следующим образом

var documentElement = document.documentElement;

function callback() {
    var clientWidth = documentElement.clientWidth;
    // 屏幕宽度大于780，不在放大
    clientWidth = clientWidth < 780 ? clientWidth : 780;
    documentElement.style.fontSize = clientWidth / 10 + 'px';
}

document.addEventListener('DOMContentLoaded', callback);
window.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', callback);

Эффект страницы выглядит следующим образом, полный пример находится вздесь

Суммировать

Если у вас есть какие-либо вопросы по этой статье, пожалуйста, оставьте сообщение для обсуждения; если вы считаете, что эта статья была вам полезна, пожалуйста, оцените это, ^_^

Релевантная информация

• Удобный рабочий процесс для создания изометрических адаптивных страниц с помощью CSS3 REM и VW.
• Думая о дизайне внешнего интерфейса и рабочем процессе, исходя из размера шрифта NetEase и Taobao
• rem для мобильной веб-адаптации
• Используйте rem для обеспечения согласованных размеров шрифта

Исходный URL:http://yanhaijing.com/css/2017/09/29/principle-of-rem-layout/

Добро пожаловать, чтобы подписаться на мою общедоступную учетную запись WeChat, отправляйте только оригинальный текст. Сканировать или искать:Ян Хайцзин