Простое и грубое решение для мобильной адаптации - REM

目录

0. Предисловие
1. Старая версия общепринятой практики
2.rem
3. расчет бэр
4. Проблемы с рем
5. Инженерное приложение

0. Предисловие

В то время как рынок мобильных телефонов с каждым днем становится все богаче, он приносит нам фронтенд-разработчиков.网页内容自适应屏幕尺寸进行显示Проблема также становится все более и более заметной. Общие проблемы адаптации могут быть решены простыми средствами, такими как процентный/медиа-запрос, но дляСтраница имеет сложную структуру или особые визуальные требованияДа, это нужно решать другими способами.

Приведенный выше эффект «Долина монументов» класса изображений является примером:
Когда вашМатериалы страницы — это отдельные графические ресурсы, вы можете рассчитать размер/положение/расстояние анимации каждой динамической фигуры в процентах; ноКогда все маленькие изображения сшиваются в одно большое изображение спрайтаВ то время я нахмурился, все не так просто, Юаньфан не знает, что вы думаете.

1. Старомодные практики

1.1 масштаб окна просмотра

Основываясь на минимальной ширине Iphone4/5 (320 пикселей), восстановите макет.

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0 />

Затем выполните простые и грубые настройки пропорционального масштабирования для мобильных телефонов с разным разрешением экрана. Например: iphone8(375px) начальный масштаб=375/320=1,18

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.18 />

Говорят, что домашняя страница Tmall делала это в первые дни, и разработчики с определенным количеством рабочих лет должны об этом знать. Чем больше и больше начальный масштаб, тем больше растягивается содержимое страницы, и содержимое страницы становится размытым.От этого метода отказались.

1.2 Фиксированная ширина пробела

В первые дни некоторые веб-сайты фиксировали ширину страницы до мертвой ширины, но избыточная ширина располагалась по центру и оставалась пустой. Это очень радует для front-end разработки, не нужно беспокоиться ни о какой адаптации, внешняя ширина — отличные 320px. Типичная практика придерживаться правил, следовать старым правилам, идти своим путем и цепляться за недостатки на различных «мобильных телефонах с большим экраном», количество пользователей может потерять 80% за считанные минуты.

1.3 Адаптивный макет

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

Разделение разрешения экрана: его нельзя различить в пределах диапазона, и невозможно достичь 100% совместимости.Как правило, основное разрешение используется для разделения;
Дополнительная рабочая нагрузка: работа над адаптивным макетом должна выполняться разработчиками, что обеспечивает дополнительную открытость;
Не подходит для страниц со сложными функциями: Адаптивность обычно подходит для информационных страниц, а веб-сайты со сложными функциями предъявляют более высокие требования к общему макету и стилю страницы (особенно по сравнению с ПК и H5);

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

2. rem

Вот как описывается rem на официальном сайте W3C — «размер шрифта корневого элемента».

Другими словами, когда мы указываем размер шрифта элемента как2remКогда размер шрифта этого элемента является корневым элементом<html>удвоить размер шрифта, еслиhtmlРазмер шрифта12px, то это2remРазмер шрифта элемента24px. Аналогично, когда элемент3rem, то его фактический размер шрифта равен36px.

html {font-size: 12px;}
h1 { font-size: 2rem; } /* 2 × 12px = 24px */
p { font-size: 1.5rem;} /* 1.5 × 12px = 18px */
div {width: 20rem;} /* 20 * 12px = 240px*/

html {font-size: 16px;}
h1 { font-size: 2rem; } /* 2 × 16px = 32px */
p { font-size: 1.5rem;} /* 1.5 × 16px = 24px */
div {width: 20rem;} /* 20 * 16px = 320px*/

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

Сравните em и rem:

единица измерения	определение	Функции
rem	font size of the root element	На основе размера шрифта корневого элемента
em	font size of the element	На основе размера шрифта родительского элемента

Хотя em дает преимущества модульности, поскольку em является кратным по отношению к родительскому элементу, вы можете не найти фиксированное значение во многих вложенных ems.rem — это фиксированная ссылка, которую можно использовать в любое время. Сравнение между ними не будет здесь расширяться Заинтересованные студенты могут обратиться к этой статье.rem-vs-em.

3. расчет бэр

Внимательные студенты обнаружат, что одна вещь, которую нам нужно сделать, прежде чем использовать модуль rem, — это установить корневой элемент<html>font-size, обычно есть два подхода.

3.1 JS-расчет

Прочитайте ширину экрана через JavaScript, затем рассчитайте соответствующий размер в соответствии с шириной и установите размер шрифта корневого элемента.

const oHtml = document.getElementsByTagName('html')[0]
const width = oHtml.clientWidth;
// 320px的屏幕基准像素为12px
oHtml.style.fontSize = 12 * (width / 320) + "px";

Таким образом под iphone8 (375px)htmlРазмер шрифта составляет 14,0625 пикселей, а размер шрифта для iphone8p — 15,525 пикселей.

Если вы установите размер шрифта элемента под iphone8 (375px) как1.7066rem, эффект состоит в том, чтобы установить его размер шрифта в 24px то же самое (24 / 14,0625 = 1,7066).

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

Преимущество использования JS для получения ширины экрана заключается в том, что его можно на 100 % адаптировать ко всем ширинам моделей, поскольку его<html>Базовый размер элемента рассчитывается напрямую. Поскольку это код JS, чтобы избежать динамической настройки<html>Размер шрифта элемента заставляет страницу дрожать.Как правило, мы загружаем эту часть кода внизу заголовка и встраиваем в html-документ.

Для более подробной реализации заинтересованные студенты могут прочитать эту статью:Rem адаптивный js-оптимизированный гибкий.js.

3.2 Медиа-запросы

Так как он должен быть установлен только в соответствии с шириной экрана<html>Размер шрифта элемента, затем мы также можем выполнить эту часть работы через медиа-запросы CSS3.

@media screen and (min-width: 375px){
    html {
        font-size: 14.0625px;   
    }
}
@media screen and (min-width: 360px){
    html {
        font-size: 13.5px;
    }
}
@media screen and (min-width: 320px){
    html {
        font-size: 12px;
    }
}
html {
    font-size: 16px;
}

Такие сайты, как Suning.com, делают именно это:

4. Проблемы с рем

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

Например: У автора есть хобби читать романы.Эпоха смартфонов с большими экранами почти полностью заменила мне бумажную привычку читать десять лет назад. С 2011 года ширина экрана мобильного телефона в руке увеличивается, но размер шрифта дисплея нового программного обеспечения для чтения почти не меняется. Использование rem в определенной степени сломает привычку пользователя читать текстовый контент, особенно когда речь идет о крупномасштабном контенте.

Философия дизайна, лежащая в основе адаптации платформ iOS и Android, заключается в следующем:при чтении текста, сочетание абсолютных значений размера, таких как размер шрифта, межстрочный интервал и т. д. текста с лучшей читаемостью, имеет мало общего с абсолютным размером носителя, в котором находится текст. (Упрощенно это можно понять так: газеты формата А4 и газеты формата А3 или даже газеты большего размера имеют одинаковый абсолютный размер для комфортного чтения, потому что и то, и другое нужно читать в руках, и то же самое справедливо и для мобильных телефонов. );При просмотре фото и видео, соотношение фото и видео должно быть фиксированным, не должно быть растяжений и деформаций. Когда rem используется в размере шрифта, абсолютный размер размера шрифта на разных экранах несовместим, что противоречит философии дизайна.

Если вам интересно, вы также можете перейти к статье преподавателя:rem не трава Shennong, она не может вылечить все болезни мобильного терминала.

5. Инженерное приложение

Основная проблема, с которой мы обычно сталкиваемся при использовании rem, заключается в том, что мы привыкли использовать px для определения стилей, а px to rem требуется для расчета процесса преобразования.Когда вы впервые связываетесь с rem, вам может понадобиться px, чтобы сначала определить макет страницы, и затем один за другим Рассчитайте и замените бэр единицы.

Конечно, у нас есть более научный способ использования единицы бэр.

5,1 пикс. – веб-инструмент

ты можешь пойти вpx в rem инструмент, загрузите файл css одним щелчком мыши, и пусть этот веб-инструмент выполнит расчет и замену за вас.

5.2 mixin

1,rem

войти:

.element {
  @include rem('padding',10px 0 2px 5px);
}

выход:

.element {
  padding: 10px 0 2px 5px;
  padding: 1rem 0 0.2rem 0.5rem;
}

2,sass-rem

войти:

.demo {
  font-size: rem(24px); // Simple
  padding: rem(5px 10px); // Multiple values
  border-bottom: rem(1px solid black); // Multiple mixed values
  box-shadow: rem(0 0 2px #ccc, inset 0 0 5px #eee); // Comma-separated values
  text-shadow: rem(1px 1px) #eee, rem(-1px) 0 #eee; // Alternate use
}

выход:

.demo {
  font-size: 1.5rem;
  padding: 0.3125rem 0.625rem;
  border-bottom: 0.0625rem solid black;
  box-shadow: 0 0 0.125rem #ccc, inset 0 0 0.3125rem #eee;
  text-shadow: 0.0625rem 0.0625rem #eee, -0.0625rem 0 #eee;
}

5.3 Сборка

На сегодняшний день у нас также есть большое количество плагинов для сборки, которые помогают нам автоматизировать процесс преобразования единиц px в единицы rem:

fis3: fis3-postprocessor-px2rem
gulp stylus-px2rem
webpack px-to-rem-loader
Дополнительные плагины

6. Еще

Для получения дополнительной информации см.рем вводный урок_w3cplus

Оставь дыру - подробности инженерной практики rem