Поговорим о мобильной адаптации

внешний интерфейс CSS

Это 17-й день моего участия в августовском испытании обновлений. Узнайте подробности события:Испытание августовского обновления

Введение

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

Полностью понимая различные устройства, мы будем знать, что экраны разных размеров имеют свое собственное позиционирование.По сравнению с iPhone 5, устройства с большим экраном, такие как iPad, должны иметь большее поле зрения, а не позволять пользователям грубо чувствовать старую машину. опыт.

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

2. Базовый блок

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

  1. Во-первых, выберите в качестве эталона ширину и высоту экрана мобильного телефона (ранее это было 320×480 у iPhone4, теперь больше 375×667 у iPhone6).
  2. Для экрана Retina (например: dpr=2) для достижения эффекта высокой четкости размер холста визуального наброска будет в 2 раза больше эталонного, то есть количество пикселей в 4 раза больше исходного. (для iphone6: исходное 375×667 становится 750×1334).

физический пиксель

Физический пиксель — это наименьшая физическая единица отображения на дисплее (экране мобильного телефона).В соответствии с планированием операционной системы каждый пиксель устройства имеет собственное значение цвета и значение яркости.

Пиксель, независимый от устройства (пиксель, независимый от плотности)

Аппаратно-независимый пиксель (также называемый пикселем, не зависящим от плотности) можно рассматривать как точку в компьютерной системе координат, которая представляет собой виртуальный пиксель (например, CSS-пиксель), который может использоваться программой, а затем преобразовываться в физический пиксель соответствующей системой.

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

Соотношение пикселей устройства DPR

соотношение пикселей устройства = физические пиксели / независимые от устройства пиксели; // в определенном направлении, направлении x или y Вы можете получить dpr текущего устройства в window.devicePixelRatio в JS.

3. Распространенные типы макетов

рем-макет

принцип:В зависимости от размера экрана и dpr мобильного телефона динамически изменяйте эталонное значение html (размер шрифта).

формула: rem = document.documentElement.clientWidth * dpr / 100

Примечания:Умножьте на dpr, потому что страница может масштабироваться в 1/dpr раз, чтобы достичь границы в 1 пиксель (если нет, dpr=1).

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

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

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

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

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

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

практическое применение

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

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

/* 作用于根元素,相对于原始大小(16px),所以html的font-size为32px*/
html {font-size: 2rem}
 
/* 作用于非根元素,相对于根元素字体大小,所以为64px */
p {font-size: 2rem}

Например:

Расчетная ширина проекта ширина элемента дизайна
320px 50px
480px 75px
640px 100px

Соотношение элементов в расчетном чертеже: 100/640=75/480=50/320=15,625

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

ширина страницы размер шрифта html (1rem) ширина элемента p
320px 320/100=3.2px 15.625*3.2=50px
480px 480/100=4.8px 15.625*4.8=75px
640px 640/100=6.4px 15.625*6.4=100px

При разработке используйте px для разработки, и проект преобразует px в rem до того, как CSS вступит в силу.

vw

vw/vhединица длины, основанная на окне Viewportwindow.innerWidth/window.innerHeightЕсть четыре единицы, связанные с Viewport в CSS Values ​​and Units Module Level 3, которыеvw,vh,vminа такжеvmax.

  • vw: сокращение от ширины окна просмотра, 1vw равно 1% от window.innerWidth.
  • vh: Подобно vw, это сокращение для высоты Viewport, 1vh равно 1% от window.innerHeihgt\
  • vmin: значение vmin меньше текущего значения vw и vh.
  • vmax: значение vmax больше текущего значения vw и vh.

image.pngВидно, что vw на самом деле реализует 1vw = 1per По сравнению с rem, которому нужно вычислять эталонное значение html, vw, несомненно, удобнее.

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

Q: Vw настолько удобен, он лучше рем и может полностью заменить рем?

О: Конечно нет.

у vw тоже есть недостатки.

  • Преобразование vw иногда бывает неточным, а меньшие пиксели не подходят для адаптации Точно так же, как мы можем использовать меньшее значение для точного представления большего значения, использование большего значения для представления меньшего значения может иметь проблемы, такие как цифровое преобразование, и не может быть точно представлено. .
  • vw не так совместим, как rem
  • При использовании гибкого макета vw не может ограничивать максимальную ширину. rem может ограничить максимальную ширину, контролируя контрольное значение HTML.

Вопрос: Рем настолько идеален?

О: рем не панацея

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

4. Схема адаптации

Вариант 1: рем/фольксваген

Применимая сцена:

  • Существует много типов визуальных компонентов, и визуальный дизайн сильно зависит от относительного соотношения позиций элементов: vw/rem

Пример:

  • Вы голодны (Также 5. Голоден.?/Мистер/)
  • Окно просмотра увеличено
  • Размер шрифта элемента html по-прежнему указывается в px.
  • Используйте форму vw + rem fallbak для размещения определенных элементов.
  • Нет ограничений на ширину макета
  • Процесс сборки css требует поддержки плагинов

Вариант 2: flex + px + процент

Применимая сцена:

  • Сценарии, которые преследуют цель чтения, например страницу со списком.

Пример:

  • Знаю почти(Вууху. Call.com/)
  • Для сценариев, ориентированных на чтение, используйте макет px.
  • Тенсент (надеюсь.QQ.com/)
  • Основное содержание главной страницы — новости. Для удобства чтения используйте макет px.

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

Прекрасная рекомендация в прошлом

Практика оптимизации производительности интерфейса

Разговор о раздражающих регулярных выражениях

Получите адрес потока большого двоичного объекта файла для реализации функции загрузки.

Рекомендации, связанные с Git

Простое введение в Git

git реализует автоматическое нажатие

Как я использую git на работе

Рекомендации, связанные с интервью

Front-end Swastika — Основы

Внешний вид 4D-зоны — расширенный

Для получения дополнительной информации см.:Домашняя страница