Мобильное адаптивное решение HTML5 и ловушка

Оригинальная ссылка:blog.feet Apart.com/2019/01/29/…

Пожалуйста, укажите источник

Недавно я как раз соприкоснулся с фронтенд-разработкой и взялся за мобильный проект H5. В результате объект сбросит столько же питов на переднем конце и столько же питов на мобильном конце H5.

Теперь, когда проект подошел к концу, вот резюме

Адаптивное решение для экрана

Прежде чем представить план, сначала объясните предысторию проекта и требования, ведь все планы нельзя отделить от реальных потребностей.

потребности и фон

• ширина устройства> 800 пикселей, ширина тела 800 пикселей
• 320 пикселей
• ширина устройства> 320 пикселей, ширина тела 320 пикселей
• Большинство шрифтов не масштабируются при изменении ширины
• Ширина дизайна: 1080 пикселей

адаптивное решение

Что касается адаптивного решения, то поиск в гугле даст много результатов, но в целом наиболее полезными я считаю серию статей, написанных Да Мо, ручным даосом, а ссылка на исходный текст будет дана позже. В общем, основные решенияremа такжеvhдва вида.

РЭМ (гибкий)

rem(размер шрифта корневого элемента) — единица измерения размера шрифта относительно корневого элемента. Проще говоря, это относительная единица. ВидетьremВсе будут помнитьemединица измерения,em(размер шрифта элемента) — это единица измерения размера шрифта относительно родительского элемента. На самом деле они очень похожи, за исключением того, что одно правило расчета зависит от корневого элемента, а другое — от родительского элемента.

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

Используя это решение, вы можете использовать проект Taobao с открытым исходным кодом.lib-flexible. Он может автоматически настроить его для васhtmlпомеченfont-sizeЖдать. Буду1remустановить на экран1/10.

оremПрограмма, Учитель Да Мо находится вИспользование Flexible для реализации терминальной адаптации страниц H5 Taobaoподробно описано в . Всем рекомендую прочитать.

Как видите, г-н Да Мо также недавно обновил Wenzheng, поэтому рекомендуется использовать более удобныйvwстроить планы.

VW

vwсоставляет 1/100 ширины области просмотра, используяvwПравильнее сделать адаптивный.

Например, если ваш дизайн750pxширина. для75pxэлементы могут быть установлены в10vw. чтобы ширина была375pxПроизводительность на мобильном телефоне37.5px.

Конечно, если положить каждомуpxЕсли аннотации конвертируются вручную, это также требует много работы.postcss-px-to-viewportмогут быть автоматически преобразованы вvw. Вам нужно только указать ширину чертежа при настройке.

Точно так же настоятельно рекомендуется прочитать следующую книгу учителя Дамо.vwмакет статейПоговорим об адаптации мобильных страниц

моя схема vw+rem

vwЭто хорошо, но, к сожалению, не соответствует моим потребностям. потому чтоvwсоставляет 1% от всей ширины области просмотра, если вы просто используетеvwсхема, не ограниченоbodyМаксимальная и минимальная ширина.

Так что я принялvw + rem. Если ширина экрана находится в пределах ширины, которую необходимо адаптировать, тоhtmlпомеченfont-sizeУстановить как10vw. Если ширина экрана превышает максимальный или минимальный предел. будуhtmlпомеченfont-sizeУстановите фиксированное значение. похожий наlib-flexible,Буду1remустановить ширину тела1/10.

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

html {
  height: 100%;
  font-size: 10vw;
}
body {
  font-size: 16px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

@media screen and (max-width: 320px) {
  html{
    font-size: 32px;
  }
  body{
    min-width: 320px;
  }
}
@media screen and (min-width: 800px) {
  html{
    font-size: 80px;
  }
  body{
    max-width: 800px;
  }
}

Конечно, таким образом, мы должны использоватьremБлок настроен. аннотация чертежаpxПеременаremУ юнитов есть и готовые инструменты. Блогеры используютpostcss-pxtorem.

Конечный эффект:

яма

Приведенная выше схема адаптации в основном может удовлетворить большинство потребностей. Расскажу о том, с какими ямами я столкнулся.

проблема с дробным пикселем

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

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

Например, в следующем примере одно и то же значение пикселя ведет себя по-разному:Онлайн-экземпляр

IOS,macOSУстройство с минимальным размером пикселя, по-видимому, поддерживает 0,5 пикселя, поэтому в приведенном выше примере производительность на устройствах Apple не очень понятна.

Но в конце концов, большинство устройств все ещеAndroidа такжеwindowsсистема.

Итак, как именно браузеры обрабатывают дробные пиксели?Задача о дробных пикселях, созданная remЭта статья дает ответ:

浏览器在渲染时所做的舍入处理只是应用在元素的渲染尺寸上，其真实占据的空间依旧是原始大小。
也就是说如果一个元素尺寸是 0.625px，那么其渲染尺寸应该是 1px，空出的 0.375px 空间由其临近的元素填充；同样道理，如果一个元素尺寸是 0.375px，其渲染尺寸就应该是 0，但是其会占据临近元素 0.375px 的空间。

Итак, что может пойти не так в нашей схеме?

1. Исчезли масштаб ниже 1PX элементов будут
2. Два элемента одинаковой ширины отличаются на 1 пиксель, потому что окружающие элементы имеют разную ширину.
3. Квадраты с одинаковой шириной и высотой имеют разную длину и ширину
4. border-radius: 50%Круг не круглый

Что касается первого вопроса, он обычно отображается на этикетке как1pxМесто. Поэтому большинство плагиновpostcss-pxtoremилиpostcss-px-to-viewportОба предоставляют возможность конвертировать минимальные пиксели. Нам нужно только указать минимальный пиксель преобразования для меньших пикселей (например:1px), он не преобразуется вremилиvw. Конечно1pxСуществует также проблема слишком толстого экрана на сетчатке, которую мы обсудим позже.

На оставшиеся несколько вопросов особо хорошего решения пока не нашел, ведь места много разные.1pxЭто приемлемо. Только некоторые относительно небольшие элементы будут более очевидными. Мое решение не состоит в том, чтобы автоматически преобразовывать вremилиvw, но черезjsПо ширине устройства рассчитайте фактический размер элемента под устройствомpx. Динамически устанавливается на элементstyleначальство. Таким образом, вышеуказанная проблема не возникнет.

Если у вас есть лучшее решение. Добро пожаловать, чтобы оставить сообщение для обсуждения.

0.5px проблема

Из-за описанной выше проблемы с десятичными пикселями мы не1pxэлементы , поэтому для750pxна дизайн1pxтонких линий при ширине экрана375pxизiphone6все еще на1px, пропорционально должно быть0.5px. Поэтому студенты-дизайнеры спросят: «Почему эта тонкая линия толще?» Мы тоже очень беспомощны, потому что0.5pxне могу показать...

Но, если подумать, дляDPR=2еще более высокие устройства,1pxОн визуализируется несколькими физическими пикселями, которые на самом деле могут отображать более тонкие линии. Итак, как мы можем рисовать более тонкие линии?

Учитель Да Мо снова появился,«Поговорим о решении 1px под Retina»Учитывая несколько вариантов:

1. viewportЧтобы увеличитьdevice-widthизdprкратно, а затем сжимается1/dprотображение времени
2. border-imageУстановите полупрозрачное и наполовину отображаемое изображение для достижения цели разделения границы на две части.
3. Тот же принцип, что и выше, но с использованиемsvgрисовать картинки
4. Медиа-запрос с псевдоэлементами, набор для псевдоэлементов1pxграницы, а затем уменьшить1/dprотображение времени

Каждая из вышеперечисленных схем имеет свои особенности.Две схемы 2 и 3 фактически рисуют0.5px, а две схемы 1 и 4 сблизить物理像素的1px

Курсор: элемент указателя щелкает по проблеме цвета фона

за добавленныйcursor:pointerЭлементы атрибутов, при нажатии на мобильную сторону будет подсвечиваться фон.

добавить к элементу-webkit-tap-highlight-color: transparent;Атрибут для скрытия подсветки фона.

Проблема отклонения высоты строки по вертикали в браузере Android

Как мы обычно используем вертикальное центрирование, это использоватьline-height, но этот метод работает вAndroidУстройство не полностью отцентровано.

Конкретная причина в том, чтоAndroidПроблемы с китайской типографикой, вы можете обратитьсяЗная: почему вертикальное центрирование высоты строки отличается от браузера Android?

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

Справочная статья

• Использование Flexible для реализации терминальной адаптации страниц H5 Taobao
• Поговорим об адаптации мобильных страниц
• Задача о дробных пикселях, созданная rem
• Поговорим о решении 1px под Retina
• Почему вертикальное центрирование высоты строки отличается от браузера Android?

---

Добро пожаловать на официальный аккаунт «Большого Front-End разработчика». Предоставьте вам больше передовых технологий и информации