Закончился последний законный отпуск в 2018. Я считаю, что большинство студентов, которые разрабатывают или делали разработку мобильных страниц, более или менее поняли решение использования rem для адаптации мобильной страницы и решение использования vw. , (Студенты, которые не понял, что это может относиться к этим двум статьям г-на Да МоИспользование Flexible для реализации терминальной адаптации страниц H5 Taobaoа такжеПоговорим об адаптации мобильных страниц) также столкнулся с рассмотрением выбора между различными схемами адаптации. Недавно я провел новый раунд исследования схемы адаптации мобильного терминала. В этот период у меня также есть некоторые мнения по различным схемам адаптации, которые я только что записал. каждый.
Некоторые мысли о схемах vw и rem
Итак, мобильная адаптация = vw или rem?
конечно, нет.Не все мобильные страницы во всех сценариях подходят для решений vw или rem, суть таких решений заключается в масштабировании макета в равных пропорциях., чтобы страница имела аналогичный эффект масштабирования векторного изображения на экранах разных размеров, то есть чтобы обеспечить пропорциональное соотношение между положением и размером каждого элемента страницы, и чтобы элементы отображались четко.
Такое решение больше подходит для мобильных страниц, где много типов визуальных компонентов, а визуальное оформление сильно зависит от взаимного расположения элементов. На самом деле, большинство страниц можно адаптировать с помощью схемы rem или vw, но для страниц с большим количеством текстового контента или страниц, которые хотят помочь пользователям погрузиться в просмотр, я лично не рекомендую использовать схему пропорционального масштабирования, по крайней мере не полностью. Используя схему пропорционального масштабирования, абсолютная единица длины пикселей должна использоваться непосредственно для текстового содержимого, в конце концовПользователи хотят видеть больше контента, а не более крупный контент на телефонах с большим экраном.. На самом деле, многие из этих веб-сайтов напрямую используют px в сочетании с flex и другими методами верстки для мобильной адаптации.Я приведу несколько примеров позже при обсуждении конкретных технических решений.
Что именно делает схема rem?
В реализации различных схем адаптации бэр есть два основных момента.
настраивать<meta name="viewport" content="xxx">(Вы можете масштабировать область просмотра в соответствии с dpr, или вы можете напрямую использовать 1x размер области просмотра)
Установите размер шрифта элемента html в соответствии с шириной текущего макета (обычно ширина области просмотра или ограниченная максимальная/минимальная ширина макета)
Как я уже упоминал ранее, суть решений vw и rem заключается в "равном масштабировании", поскольку vw и rem являются относительными единицами длины, которые вполне удовлетворяют этому требованию. Разница в том, что vw составляет 1% от ширины области просмотра, а rem — это размер шрифта html-элемента. Когда мы связываем размер шрифта html-элемента с шириной области просмотра, rem может имитировать эффект использования vw для макета. Таким образом, в схеме rem мы просто рассматриваем rem как тень vw. Напиши rem, прочитай как vw... (Сюжет кажется кровавым... rem: Конечно, я выбираю тебя простить)
Разве это не могло бы просто использовать vw напрямую?
Подождите, причина, по которой решение rem стало популярным, заключалась в том, что в то время браузерная поддержка единиц просмотра не была идеальной (IOS 8+, Android 4.4+, см. единицы просмотра).caniuse). Для сравнения rem намного лучше (IOS 4.1+, Android 2.1+ см.caniuse), поэтому для vw переднему концу было нелегко сказать, что он любил вас в большой среде в то время.
Я думаю, в это время кто-то скажет: "Синсин, брат, прошло 8102 года!"
Да, 8102 год вот-вот пройдет, и vw видно в том случае, если требования к совместимости не особо высоки, и для vw тоже есть какие-то патч-решения, но есть еще одна проблема, которую нужно немного обсудить. . . .
Может ли vw полностью заменить rem?
Ответ по-прежнему нет. Простое использование vw для макета не может ограничить ширину макета.Для сценариев с этим требованием, по крайней мере, необходимо смешивать vw и rem для обработки пограничных случаев. Это решение также будет более подробно упомянуто ниже, но здесь оно не приводится.
Небольшое резюме схемы адаптации мобильного терминала в существующей производственной среде
Когда мы изо всех сил пытаемся найти путь, который нам подходит, мы могли бы также посмотреть вверх и посмотреть, как это делают другие. Итак, в реальном мире, какие схемы адаптации переняли мобильные страницы различных интернет-компаний? Есть ли уникальные навыки, которые являются более уникальными? Ниже я дам вам несколько каштанов в соответствии с единицей длины CSS, фактически используемой страницей в качестве стандарта деления.
px схема
Как упоминалось в начале, это не означает, что мобильный терминал должен использовать относительную единицу длины.Традиционный адаптивный макет по-прежнему является хорошим выбором, особенно в новостях, сообществах и других сценах с более читаемым контентом.Вы можете напрямую использовать ед. пикс. Создайте более удобный интерфейс. Схема px может позволить мобильным телефонам с большим экраном отображать больше контента, что больше соответствует привычкам людей читать. Веб-сайты, использующие эту схему:
Домашняя страница мобильного терминала в основном представляет собой новостной контент, который требует лучшего чтения и подходит для макета с использованием px напрямую.
Решение Toutiao немного особенное.Он по-прежнему устанавливает размер шрифта элемента html, а также добавляет атрибут data-dpr и масштабирует область просмотра, но окончательный вывод css равен px, а rem не используется, и он будет скачать разные dprs.Стили определяются отдельно, как показано на следующем рисунке:
Это может решить проблему границы в 1px, и размер текста не будет меняться с размером экрана (ведь текстового контента много), хотя места для использования rem я пока не нашел, но Я могу сделать rem-схему для специальных элементов макета, когда это необходимо, но это решение должно удвоить размер файла CSS, а вывод такого CSS должен поддерживаться плагином процесса сборки, который является конкретным решением.
Глядя сюда, вы думаете, что окончательный вывод px не может сделать гибкую компоновку, подобную rem/vw, давайте покажем вам уникальный навык...
Какой? После того, как нам долго показывали статью, результат px?
На самом деле, если вы сообразительны, то вскоре обнаружите, что схема адаптации мобильного терминала Taobao по эффекту похожа на схему rem/vw.Стили элементов генерируются js.Хотя единица измерения действительно px, схема по-прежнему масштабируется до ширины 375 пикселей. В принципе, это должна быть схема css в js, но процесс установки размера шрифта элемента html в схеме rem встроен в процесс использования js для вычисления стиля элемента. Такая схема предполагает унификацию и поддержку общей структуры разработки и не является особенно общей схемой. Преимущество может заключаться в том, что прямое использование единиц px дает более точные результаты. Можно сказать, что это трюк одной рукой. Конечно, на Таобао еще много линеек продуктов, и может быть не та схема адаптации (такая как пример в статье г-на Дамо), это только для этой мобильной домашней страницы.
рем схема
Схема rem можно сказать относительно зрелая, скорость появления тоже высокая, поэтому в подробности вдаваться не буду.В целом схема rem в основном делится на два типа.Одна схема масштабирования вьюпорта, такие как lib-flexible года.Удобнее иметь дело с такими деталями, как граница в 1px, но это повлияет на медиа-запрос. Другой — не масштабировать область просмотра и ввести отдельное решение для таких проблем, как граница в 1px. Тогда есть много разных способов определить размер элемента html в соответствии с эталонным размером.Нет стандарта, чтобы сказать это.Я просто приведу несколько примеров для иллюстрации:
Не масштабировать область просмотра
(Соответствующая связь между rem и px, описанная ниже, возникает при ширине экрана 375px)
Это здесь, это, наконец, здесь! Задав так много вопросов о vw, есть ли какие-либо существующие продукты, которые используют vw в больших масштабах? Как работает схема совместимости?
Мобильная домашняя страница JD.com использует метод макета vw + rem. Макет элемента по-прежнему использует единицу измерения rem без масштабирования области просмотра. Размер шрифта элемента html использует форму резервного варианта vw + px и использует медиа-запрос для ограничения ширина макета. Как показано ниже
Решение NetEase в основном такое же, как и решение JD.com: оно не масштабирует область просмотра, использует медиа-запросы, обрабатывает только размер шрифта html-элементов и ограничивает ширину макета.
Ele.me также использует решение vw+rem, но вьюпорт масштабируется и ширина макета не ограничена, размер шрифта html элемента по-прежнему указывается в px, но в макете конкретных элементов используется форма vw+ px fallbak, как показано ниже:
Можно видеть, что использование двух вышеупомянутых решений vw+rem не внесет значительных изменений в существующие решения rem, оба используют метод vw + резервный вариант, и проблема совместимости гарантирована, но решение Ele.me может быть подключаемым модулем. еще больше нужна поддержка в процессе сборки (по этому я вам потом объясню, что такое сюрприз). С этой точки зрения лично я не рекомендую использовать библиотеку viewport-units-buggyfill для совместимости в решении vw, предложенном господином Да Мо, потому что библиотека использует атрибут css content для обработки совместимости, на что указано в официальном документе.Чтобы повлиять на тег img некоторых браузеров, необходимо глобально ввести правило css. А для ситуаций, требующих нормального использования контента (типа иконочных шрифтов), тоже вызовет неизбежные конфликты, а также не поддерживает совместимость псевдоэлементов. Так что с моей личной точки зрения, если вы спросите меня, какую схему адаптации vw я использую, я порекомендую вам две приведенные выше схемы vw + rem.
Это все что есть?
Конечно нет.Я всего лишь перечислил несколько типичных решений по адаптации мобильных терминалов.На самом деле есть еще много моментов,которые можно уловить сами по себе с точки зрения конкретных деталей реализации.Подходящее все-таки самое лучшее.Та серебряная пуля может не Появился, но у нас никогда не было недостатка в остром оружии в наших руках.
Цветная (ан) яичная (ли) часть
Я полагаю, что у большинства студентов также есть идея интегрировать vw в существующую схему адаптации мобильного терминала в реальной разработке. Подобно двум схемам vw+rem, о которых я упоминал выше, схема изменения только размера шрифта html-элемента не требует больших затрат для студентов, которые уже используют схему rem, и должна быть только в исходном медиа-запросе (или js при создании стиля) вfont-size: *pxдобавить послеfont-size: *vwВот и все, если вам нужно ограничить ширину макета, вам нужно добавить еще немного суждений.
А для метода Ele.me вывода rem+vw одновременно с использованием единицы длины это должно быть сделано через небольшой дополнительный плагин. Если вы, как и я, используете Stylus в качестве препроцессора CSS, то я написал плагин Stylus, который поможет вам справиться с этим.
Этот плагин позволяет использовать px для написания css в процессе разработки.В отличие от некоторых существующих плагинов, он поддерживает вывод нескольких схем адаптации одновременно.В настоящее время он поддерживает rem,чистую схему vw и схему vw+ только что упомянутая схема rem. И очень удобно иметь дело со сценами, которые не хотят конвертировать px. То есть, если вы сейчас используете схему rem, вы можете напрямую заменить подключаемый модуль, и вы можете в основном легко переключаться, когда вам нужно переключиться на схему vw или vw+rem.