предисловие
Многие из предприятий компании все еще используютсяpxНа этапе обработки стилей с гибкой версткой иногда это происходит из-за визуальных требований, а иногда из-за страха перед онлайн-проблемами.
Схема адаптации мобильного терминала является общей темой, но для разных проектов и разных бизнес-сценариев могут потребоваться разные схемы адаптации для адаптации мобильного терминала, а базовый вариант обратной совместимости также необходимо заказывать заранее.
Общая ширина и высота
Фактически адаптация мобильного терминала такая же, как и у следующих игрушек, и соответствующую форму можно вставить в соответствующий контейнер. Но есть небольшая проблема, размер этих блоков может не совпадать с контейнером.Для передка эти блоки не из дерева, а должны быть из пластилина.
Деловая среда является ключевым фактором в определении плана адаптации всего проекта. Сколько сред должен быть совместим набор кода, определяется, когда проект начинает разрабатываться.
Крупнейший в мире сайт знакомств для программистов,гитхаб веб-мастерОчевидно, что весь контент ограничен областью контента размером 980 пикселей.
И его мобильный терминал тоже явно отдельный макет, а общая ширина больше не ограничена, даже на таком устройстве, как iPad Pro с шириной 1024 пикселя, он все равно будет занимать весь экран.
Основной сайт Taobao похож на github.Он разделен на страницу для мобильных устройств и страницу для ПК.Страница для ПК также имеет пробелы слева и справа, что также позволяет пользователям сосредоточиться на средней области при использовании широкого экрана. .
В настоящее время большинство сайтов используют UA для определения устройства пользователя, а затем направляют на ПК или страницу H5.
Единственная разница между ними заключается в том, что Taobao более строго перенаправляет страницу напрямую на другую ссылку, в то время как github загружает другой файл CSS для рендеринга. Конечно, принципиальной разницы между этими двумя схемами нет.А отдельные страницы H5 лучше повторно использовать на клиентском сайте..
Так что, если разработчиков достаточно, разработка страниц для обоих типов устройств — удобное решение. Если ваш мобильный клиент разработан на основе веб-просмотра, то страница H5 также может быть напрямую встроена в веб-просмотр для отображения.
адаптация по ширине
Что касается общей ширины, соотношение сторон обычных мобильных устройств относительно согласовано, а ширина устройства, такого как iPad, слишком велика, что приводит к странному эффекту на отображаемой на нем обычной странице H5. Например, в эффекте отображения основной станции Taobao на iPad видно, что верхний и нижний навигаторы сильно растянуты, что приводит к плохим результатам. Однако, если принять во внимание вопрос стоимости, пользователи iPad будут больше использовать APP для доступа, поэтому важность стиля страницы H5 снижается. Мобильная версия github лучше адаптируется к широкоэкранным устройствам.
Если вам интересно, вы можете пойти и посмотретьСтраница Taobao H5, на этой странице есть очень интересное место, это место будет упомянуто позже, вот первое упоминание:
В дополнение к схеме, где ширина по-прежнему занимает всю ширину экрана, установка максимальной ширины экрана может обеспечить эффект отображения на широкоэкранных устройствах, но в схеме обработки необходимо учитывать пустую часть.
Из-за фиксированной максимальной ширины специальная обработка требуется только для устройств с пробелами, превышающими ширину (это может быть фон, функциональные кнопки и т. д.), а часть с максимальной шириной посередине может использоваться для повторного использования кода .
Область просмотра
Этот блог от команды коалаЭто было написано очень ясно.Спасибо друзьям Коалы за то, что они предоставили нам дешевые зарубежные покупки и такой хороший вывод документов, лол:
PC
В настольных браузерах обычная ширина области просмотра — это ширина всего окна браузера, которая будет масштабироваться по мере расширения и сужения окна браузера. По умолчанию теги HTML будут занимать всю область просмотра, если не задана статическая ширина HTML.
Если максимальная ширина установлена на странице со стороны ПК, как описано выше, то при масштабировании окна просмотра за пределы максимальной ширины эффект отображения видимой области не пострадает, но если он уменьшится до значения, меньшего, чем максимальная ширина, оригинал Макет страницы очень важен.Гибкая компоновка и процентная компоновка могут гарантировать, что макет страницы не рухнет при сжатии страницы.
видовой экран макета
На мобильных устройствах область просмотра больше не связана с шириной мобильного браузера, а полностью независима. Мы называем это окном просмотра макета.
Вся страница может стать очень большой, и тогда в видимой области устройства отображается только ее часть Размер всей страницы называется Layout Viewport. Этот размер можно передатьdocument.documentElement.clientHeight/clientWidthчтобы получить.
ППК это очень ранняя статьяОкно просмотра очень четко описано.
Как видно из приведенного выше рисунка, ширина и высота окна просмотра макета на самом деле являются переменными.При масштабировании страницы и масштабировании с помощью жестов окно просмотра макета будет меняться.При масштабировании страницы до того же размера, что и видимая область. устройства, окно просмотра макета просто равно выходному экрану визуального просмотра.
Видимый вьюпорт
Visual Viewport на самом деле очень прост для понимания, то есть размер видимой области всего экрана. Из-за физических пикселей устройства, то есть в CSSptЕдиница фиксирована, и после масштабирования страницы на мобильной стороне распределение пикселей CSS на странице также меняется на устройстве.
идеальное окно просмотра
Идеальное окно просмотра на самом деле является комбинацией двух вышеперечисленных.Когда мы устанавливаем ширину окна просмотра макета в ширину экрана, это обеспечивает постоянные пиксели CSS на странице.
Вот обычно используемая адаптация мобильного терминала<meta name="viewport" content="width=device-width">
Этот тег гарантирует, что на мобильных устройствах ширина страницы будет такой же, как ширина экрана.
зум
При увеличении масштаба на мобильном телефоне пиксели CSS на странице не изменяются, но изменяется соотношение пикселей видимого окна просмотра, но отключение масштабирования может привести к ухудшению работы некоторых пользователей. Более целесообразно удерживать коэффициент масштабирования в определенном диапазоне.
общее расположение
На основе вышеупомянутого контента в сочетании с текущим бизнес-контентом, в основном адаптированным для мобильных устройств, устанавливается максимальная ширина, аmetaУстановка идеального окна просмотра в этикетке может обеспечить общий эффект макета на мобильных устройствах и ПК.
Макет контента
В настоящее время эффект макета контента для адаптации мобильного терминала выглядит следующим образом:
- Проценты, ширина и высота всех элементов, которые необходимо динамически регулировать, указаны в процентах, а размер шрифта фиксирован в пикселях.
- rem, соотношение пикселей устройства/пикселей CSS получается вычислением или JavaScript, и определяется пиксель шрифта корневого элемента, а затем все единицы устанавливаются в rem в соответствии с пикселем шрифта корневого элемента для определения размера. И базовый рем будет меняться в зависимости от устройства.
- vw, в соответствии с шириной Visual Viewport текущего устройства как 100vw, а затем получить ширину единицы vw, все элементы расположены в стиле в соответствии с единицей vw.
- Media Query: используйте точки останова для адаптации стилей устройств с разной шириной.
У каждого из вышеперечисленных методов есть свои преимущества.Можем посмотреть на эффект в практическом применении:
процент
Использование процентов в качестве стандарта для размера контента хорошо работает в большинстве случаев, а проценты хорошо работают, чтобы удерживать элементы на своих местах, независимо от ширины экрана.
Однако с текстом есть очень большая проблема, так как текст имеет фиксированный размер, то при изменении dpr экрана пиксели CSS текста остаются неизменными, что приводит к изменению положения текста на странице. Результатом этого является то, что когда текста слишком много или размер экрана слишком мал, произойдет переполнение; но если в качестве эталона используется маленький экран, шрифт будет слишком маленьким.
Когда текущий мобильный терминал адаптируется к макету, процентное значение будет больше использоваться в качествеsectionСовместимая типографика для элементов уровня. Это также связано с эффектом в дизайн-проекте.Если элемент должен иметь фиксированную ширину в дизайн-проекте, то используйте его напрямую.pxПросто убедитесь, что ширина есть.
rem
remЭта единица и предыдущая обычно используемаяemчем-то похожи, разница только в том, чтоremи на основе корневого элементаfont-sizeОтносительное значение, которое необходимо вычислить.emНедостатков много, например, после вложения слой за слоем можно забыть предыдущий слой.font-sizeНасколько оно большое. Или например в текущей модульной разработке один маршрут вложен в другой маршрут, и даже родительский элемент нужно найти в других файлах.
чтобы решитьemЕсть еще проблемы в стандартеremЭтот модуль помогает с типографикой. Используются все размеры элементовremв качестве блока, а затем в корневом элементе страницы мы называем корневой элементfont-sizeделать назначения детерминированно, так что всеremЕдиницы все с четким ориентиром тоже. Когда экран адаптирован, необходимо только отрегулировать это эталонное значение, чтобы гарантировать, что размер каждого элемента автоматически регулируется пропорционально.
Алиlib-гибкое решениеФактически, используя этот метод, давая<html>Привязка теговfont-sizeа такжеdata-dprсвойства для адаптации всей страницы.
Схема делит всю ширину страницы на100Причину деления на 100 экземпляров можно найти на другой схеме ниже. Каждые 10 единиц ширины как1rem, то есть ширина всего визуального наброска будет делиться на 10rem100 экз., если получен визуальный черновик750pxда, тогда1remот имени75px. Результирующий масштабный коэффициент тогда75/750, то есть каждый раз, когда вы конвертируете черновик дизайна в CSS, вам нужно только вычислить значение черновика дизайна/10 в пикселях, чтобы получить соответствующийremценность.
Рассчитайте размер шрифта корневого узла с помощью предварительно загруженного сценария JavaScript,document.documentElement.style.fontSize = window.innerWidth / 10 + 'px';, а затем, когда мы пишем код страницы, нам нужно использовать только исходное значение пикселя/эталонное значение, чтобы получить соответствующийremБлок. Конечно, каждый раз нажимать на калькулятор точно недопустимо. Если вы хотите использовать его удобно, вы можете использоватьlessилиsassЭто своего рода препроцессор для обработки страницы.
@function px2rem($px)
// 这里将设计稿的px转换为rem，
@return ($px / $unit-px) * 1rem
// 根据设备的dpr进行字体适配
@mixin font-dpr($font-size)
font-size: $font-size
[data-dpr="2"] &
font-size: $font-size / 2
Помимо того, что ширина и высота элемента могут быть лучше восстановлены, адаптация размера текста также более важна.Из-за разного dpr каждого устройства (особенно устройств iOS) многие тексты отображаются нормально на iPhone 6+, но на iPhone 5. Текст выше слишком велик, что приводит к переполнению текста.less mixinЭто просто для адаптации стиля шрифта.
Этот метод сочетает в себеsassфункция иremадаптация плюс необходимыепроцента такжеmedia queryМожет улучшить мобильную производительность.
Это эффект отображения на iphone6 с использованием этого метода, конкретный общий эффект отображения можно щелкнуть здесь,пример стиля бенчмарка rem
Если вас не устраивает эффект отображения текста на различных платформах, вы можете воспользоваться вышеупомянутымsassизmixinсделать текст в соответствии сdprСделайте рендеринг точки останова.
Проблема в том, что это применимо только к мобильному терминалу и не может быть адаптировано к горизонтальному экрану, потому что ширина страницы изменяется после горизонтального экрана, но опорное значение по-прежнему сохраняет опорное значение, изначально привязанное к корню. узел. .
vw (это окончательное решение?)
Первый взглядvwподдержка браузера,могу ли я использовать поддержку vw, использование этого устройства означает, что вы отказываетесь от пользователей ПК ниже IE11.В мире, который в основном совместим с мобильными терминалами, не так много побочных эффектов (здесь совместимость со стороной ПК намного удобнее, чем совместимость с мобильным терминалом , Странное разрешение и 2-кратный, 3-кратный экран мобильного терминала, а также жесткий iPad и горизонтальный экран заставляют меня хотеть решить свои проблемы каждый раз, когда я делаю его совместимым).
vwОн разбивает всю видимую область просмотра по горизонтали на100 копий, каждая единица1vw, самым большим преимуществом этого устройства является то, что когда оно находится на мобильном терминале, будь то вертикальный или горизонтальный экран,vwВсегда цельтесь в горизонталь, чемremК счастью, при изменении размера экрана (кстати, это совместимо с будущими мобильными устройствами с регулировкой размера экрана [ручное прищуривание]) страница не сворачивается.
Для мобильных устройств, таких как iPhone 6+375pxШирина пикселя CSS,1vwэквивалентно3.75px, с помощью этого модуля вы можете разрешить указанную выше зависимость от корневого элемента привязки скриптаfont-sizeПроблема в том, что он дает лучшие результаты как на вертикальном, так и на горизонтальном экранах.
проходя черезvwПосле разделения CSS и JS, затемvwМожно ли решить все проблемы самостоятельно?
// 首先，我司的设计稿目前都是以750px为宽度，实际为iPhone6+的375px为基准
$w-base: 375px
$w-base-design: 750px
@function px2vw($px)
@return ($px / $w-base-design) * 100vw
Во-первых, вышеsassКод может быть основан на вашем проекте дизайна вышеpxПреобразовать единицу вvwстоимость единицы. Конечно, самый простой способ — ввести данные напрямую в соответствии с пикселями на визуальном черновике, а затем напрямую вывести соответствующие пиксели.vwстоило того. Конечно, у vscode и sublime есть плагины, которые уже были сделаны, но мне не очень нравится такой способ, поэтому вы не можете получить исходное значение пикселя этого мокапа. В последующем обслуживании будет много, много, много неприятностей. Это круто писать, давайте поменяем на крематорий. . . Эффект vw можно увидеть в коде ниже.
vwТа же страница адаптации реализована
Итак, каковы преимущества и недостатки?
В настоящее время,vwДля использования в одиночку он точно не подходит, ведь на странице еще много элементов, требующих абсолютного позиционирования по размеру.pxВсегда необходимо, зрение не может сделать все адаптивным.
ТакvwЧто можно решить? Во-первых, большинство заменяет%При использовании CSS в CSS много неясностей, и методы обработки ширины, верхнего и нижнего полей, левого и правого полей, а также внутренних и внешних полей различны. Даже бывалым фронтендам иногда приходится задумываться, на чем основывается текущий процент. иvwЭто абсолютное значение, определяемое только на основе ширины экрана, которая вряд ли изменится.
Проблема эластичности, которую в основном решает процент, заключается в том, чтоvwпроблема, которую нужно решить.
vwНе все ситуации могут быть учтены, поэтому этот блок еще не является окончательным решением, и ему все еще нужно взаимодействовать с другими блоками, чтобы страница отображалась более изящно.
в заключении
Совместимость УСБ не на интерпретаторе, а на экране устройства. Большую часть времени необходимо не только отображать страницу перед пользователем, но и отображать страницу для пользователя стабильно и изящно.
Будь то проценты,remвсе ещеvw, которые используются для локального позиционирования элемента контейнера. В качестве нижнего листового элемента или элемента блока он будет использоваться чаще.pxМаксимально восстановить визуальный сквозняк.
Думая об этом в долгосрочной перспективе,vwВ случае только мобильного доступа эффект выдающийся, потому что совместимость не рассматривается, нужно рассматривать только проблему адаптации. Какой метод используется в проекте, зависит от среды, с которой должна быть совместима большая часть бизнеса.