Схема адаптивной компоновки мобильного терминала на основе REM

CSS

задний план

В настоящее время более половины работы посвящено разработке мобильных проектов, включая встроенные страницы приложений, страницы WeChat и мобильные wap-страницы.

Большая разница между разработкой страницы для мобильных устройств и разработкой страницы для ПК заключается в том, что мобильный терминал предъявляет более высокие требования к адаптивному макету. Невозможно создать несколько точек останова и использовать медиа-запросы, как на странице для ПК. Оставьте пустые поля с обеих сторон, чтобы решить проблему. проблема. Мобильные страницы должны полностью использовать пространство экрана, а мобильные устройства имеют различные размеры и разрешения.Решение проблемы адаптивной верстки мобильных страниц является основной задачей и сложностью создания новых мобильных проектов.

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

Введение в REM

rem (размер шрифта корневого элемента) — единица измерения размера шрифта относительно корневого элемента. Проще говоря, это относительная единица, а макет rem — популярное решение для мобильных адаптивных макетов. Когда страница инициализирована, используйте JS, чтобы установить размер rem в соответствии с размером экрана, dpr и другой информацией, и используйте rem при записи такой информации, как высота элемента в CSS. Если для rem установлено значение 100px, когда высота элемента равна 36px, высота элемента должна быть записана как 0,36rem.

Проблемы, возникающие при использовании традиционных макетов REM

Взяв в качестве примера 100 пикселей, многие общие атрибуты, такие как размер шрифта, нужно записывать как 0,12rem и т. д., что плохо читается, неудобно для ввода и снижает эффективность работы.

решение

Используйте px2rem-loader с webpack. Использование заключается в следующем


rules: [
  {
    test: /\.css$/,
    use: ['style-loader', 'css-loader', 'px2rem-loader?remUnit=75&remPrecision=8']
  }
]

Таким образом, вы можете иметь дело с общим рисунком дизайна 750PX, просто заполните размер свойств непосредственно в зависимости от размера рисунка дизайна,
Обратите внимание, что вам также необходимо ввести гибкий файл в файл html.


<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>

наступил на яму

При возврате браузера WeChat страница будет закэширована, но js-файл повторно вызываться не будет, что приведет к путанице в верстке. Необходимо вызвать событие pageshow для решения

e.addeventListener('pageshow', function(e) {
	// d的作用是重新设置documentElement的fontsize为clientWidth的1/10
	e.persisted&&d()
})

глубоко

Возможно, вас заинтересует, что делает flexible.js. Перед этим нужно вкратце разобраться со знанием вьюпорта

viewport
метатег окна просмотра

Метатег области просмотра имеет шесть атрибутов.

  1. ширина: ширина окна просмотра макета предоставляется в виде положительного целого числа или строки "width-device"
  2. Initial-scale: установите начальное значение масштаба страницы в виде числа с десятичными знаками.
  3. минимальный масштаб: минимальное значение масштаба, разрешенное пользователем, в виде числа с десятичными знаками.
  4. максимальный масштаб: максимальное значение масштабирования, разрешенное пользователем, в виде числа с десятичными знаками.
  5. height задает высоту видового экрана макета
  6. user-scalable Разрешить ли пользователю масштабирование, значение «нет» или «да».
Три окна просмотра
  1. видовой экран макета видовой экран макета

Ширина сайта, которую можно получить через document.documentElement.clientWidth и установить через метатег области просмотра.

  1. visual viewport - визуальное окно

Представляет размер видимой области браузера, который можно получить с помощью document.documentElement.innerWidth.

  1. идеальное окно просмотра - идеальное окно просмотра

Окно просмотра, связанное с мобильным устройством, ширина мобильного устройства. Значение ихпоне равно 320.

Отношения между ними

visual viewport width = ideal viewport width / zoom factor

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

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

Принцип lib-flexible
  1. Получите dpr и установите масштаб, обратный dpr
  2. Динамически генерировать метаданные области просмотра, значение начального масштаба равно масштабу
  3. Установите rem на 1/10 от clientWidth (ширина порта layoutview)

В настоящее время наш проект разработки пока ширина экрана составляет 10REM.

наконец

На самом деле схема REM в основном использует 1/10 clientWidth в качестве базовой единицы для установки размера элемента для достижения цели самоадаптации. Вместо этого вы можете использовать VW, и есть такие плагины, как px2vw.

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

Эта статьяПередовая продвинутая сериячасть,
Добро пожаловать, чтобы следовать иstarэтот блог или следуйте за мнойgithub

Ссылаться на

  1. px2rem
  2. Глубокое понимание области просмотра в мобильной фронтенд-разработке
Категории