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

CSS PostCSS

Передний круг действительно грязный, что вовсе не является ложью. Но преимущества хаоса — это хаос, хаос ведет к изменениям, а есть изменения для достижения прогресса. Сегодня все та же старая мелодия, говорящая об адаптации мобильных страниц. Потому что для фронтенда, работающего со страницами каждый день (страницы H5), работа по верстке всегда незаменима, что также столкнется с проблемой адаптации разных терминалов. Я не знаю, если вы похожи на меня, макеты страниц всегда имеют более или менее головную боль в заднице. Если это так, я предлагаю вам найти время, чтобы прочитать мою ерунду ниже.

Миссия, которую выполняет Гибкий

Гибкий язык существует уже несколько лет и по сей день, что спасло многих студентов от проблемы адаптации макета страницы H5. И эта программа также является относительно зрелой программой. Напомним, для того, чтобы страница лучше адаптировалась к различным терминалам, Hack означаетdprСоответственно изменяется значение<meta>на этикеткеviewportЗначение:

<!-- dpr = 1-->
<meta name="viewport" content="initial-scale=scale,maximum-scale=scale,minimum-scale=scale,user-scalable=no"> 
<!-- dpr = 2-->
<meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">
<!-- dpr = 3-->
<meta name="viewport" content="initial-scale=0.3333333333,maximum-scale=0.3333333333,minimum-scale=0.3333333333,user-scalable=no">

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

  • в соответствии сdprзначение для измененияviewportвыполнить1pxлиния
  • в соответствии сdprзначение для измененияhtmlизfont-size, таким образом используяremдобиться пропорционального масштабирования
  • Использовать хакremмоделированиеvwхарактеристика

Что касается адаптации гибкого решения, я поделился техническими документами в этой области после Double Eleven в 2015 году. Заинтересованные студенты могут прочитать "Использование Flexible для реализации терминальной адаптации страниц H5 Taobao" статья. Хотя Flexible решает многие проблемы адаптации терминала, он не всесилен и не лучший, у него все же есть некоторые проблемы, такие какiframeцитаты, иногда зарывшись в них. В ответ на некоторые из этих недостатков некоторые учащиеся провели соответствующие преобразования и могут найти подходящие решения, выполнив поиск в Интернете.

Потом времена меняются, и фронтенд технологии постоянно меняются.Позвольте спросить:Гибкость или лучшее решение? Есть ли еще потребность в гибкости?Недавно я обсуждал этот аспект, поэтому позвольте мне сначала рассказать вамГибкий выполнил свою историческую миссию, мы можем отложить Гибкий и принять новые изменения.接下来的内容,我将分享一下我最近自己探讨的新的适配方案,或许很多团队同学已经开始使用了,如果有不对之处,希望能得到大婶们的指正;如果您有更好的方案,希望能一起分享一起探讨。

Сначала подавать, потом скай

Первый двумерный код:

Вы можете отсканировать приведенный выше QR-код с помощью приложения Hand Tao, приложения Youku, браузеров, поставляемых с каждым терминалом, браузера UC, браузера QQ, браузера Safari и браузера Chrome, и вы увидите соответствующий эффект:

Эффекты серии iPhone

Некоторые эффекты Android

Примечание:Если сканирование QR-кода выше не работает, выкликните сюда, откройте онлайн-страницу и повторно создайте номер QR-кода, который может распознать ваше устройство.

Демонстрация выше протестировала модели Top30. В настоящее время не поддерживается:

бренд модель версия системы разрешение Размер экрана ПРИЛОЖЕНИЕ "Рука Дао" Ёку ПРИЛОЖЕНИЕ родной браузер QQ-браузер UC Браузер Браузер Chrome
Хуавей Mate9 Android7.0 1080 x 1920 5 дюймов Yes Yes No Yes Yes Yes
Хуавей Mate7 Android4.2 1080 x 1920 5,2 дюйма Yes Yes No Yes Yes Yes
Мейзу Mx4 (Мобильный 4G M460) Android4.4.2 1152 x 1920 5,36 дюйма Yes No No Yes Yes Yes
Oppo R7007 Android4.3 1280 x 720 5 дюймов Yes No No Yes Yes No
Samsung N9008 (Galaxy Note3) Android4.4.2 1080 x 1920 5,7 дюйма Yes No Yes Yes Yes Yes
ASUS ZenFone5(x86) Android4.3 720 x 280 5 дюймов No No No Yes No No

Модели Top30, которых нет в списке, увидят эффект, как показано выше. Что касается того, использовать его или нет, это зависит от профи. В конце концов, требуется определенное мужество, чтобы первым съесть крабов! (^_^)

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

В предыдущем разделе мы представили текущую поддержку и эффекты этой программы. Тут тоже много ерунды, так что перейдем к делу.

В мобильной верстке мы должны столкнуться с двумя наиболее важными проблемами:

  • Проблемы с адаптацией под каждый терминал
  • Детали экрана Retina

Различные терминалы, разрешение экрана, DPR,1px,2xЦифры и ряд вопросов. Затем эта схема компоновки также предназначена для решения этих проблем, но решение этих проблем больше не обрабатывается методами Hack, а напрямую обрабатывается собственной технологией CSS.

Терминал адаптера

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

Как мы все знаем,vwОн основан на единице длины окна просмотра.Порт просмотра здесь относится к области, визуализируемой браузером, и эта видимая областьwindow.innerWidth/window.innerHeightразмер. Используйте следующую диаграмму, чтобы просто проиллюстрировать:

Поскольку Viewport включает в себя много знаний, потребуется несколько статей, чтобы четко объяснить эти знания. @PPK У Бога естьдвастатьяЭти знания описаны подробно. Китайцы могут двигатьсяздесьчитать.

существуетCSS Values and Units Module Level 3Есть четыре модуля, связанные с Viewport, а именноvw,vh,vminиvmax.

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

vminиvmaxОн рассчитывается по значению размера с большей длиной в окне просмотра, еслиwindow.innerHeight > window.innerWidthноvminвзять один процентwindow.innerWidth,vmaxвзять один процентwindow.innerHeightрассчитать.

Или используйте картинку для иллюстрации, картинка стоит тысячи слов:

Так что смело используйте в этой схемеvwзаменить предыдущий гибкийremсхема увеличения. Давайте сначала вернемся к нашим реальным делам. В настоящее время выпущен проект визуального дизайна, и мы все используем750pxШирина, из вышеуказанного принципа, то100vw = 750px,Сейчас1vw = 7.5px. Тогда мы можем в соответствии с расчетной схемойpxЗначение напрямую преобразуется в соответствующийvwценность. Увидев это, многие студенты почувствовали себя разбитыми и вынуждены были заново считать, можно ли проще, можно ли проще, на самом деле можно, мы можем использовать плагин PostCSSpostcss-px-to-viewport, что позволяет нам писать прямо в кодеpx,Например:

[w-369]{
    width: 369px;
}

[w-369] h2 span {
    background: #FF5000;
    color: #fff;
    display: inline-block;
    border-radius: 4px;
    font-size: 20px;
    text-shadow: 0 2px 2px #FF5000;
    padding: 2px 5px;
    margin-right: 5px;
}

После компиляции PostCSS все, что нам нужно, этоvwКод:

[w-369] {
    width: 49.2vw;
}
[w-369] h2 span {
    background: #ff5000;
    color: #fff;
    display: inline-block;
    border-radius: .53333vw;
    text-shadow: 0 0.26667vw 0.26667vw #ff5000;
    padding: .26667vw .66667vw;
}
[w-369] h2 span,
[w-369] i {
    font-size: 2.66667vw;
    margin-right: .66667vw;
}

В реальном использовании вы можете настроить соответствующие параметры плагина:

"postcss-px-to-viewport": {
    viewportWidth: 750,
    viewportHeight: 1334,
    unitPrecision: 5,
    viewportUnit: 'vw',
    selectorBlackList: [],
    minPixelValue: 1,
    mediaQuery: false
}

Предположим, ваш проект проекта не750pxно1125px, то вы можете изменитьvewportWidthзначение . Для подробного ознакомления с этим плагином,Вы можете прочитать его официальную документацию.

выше решеноpxприбытьvwконверсионный расчет. Итак, где его можно использоватьvwчтобы соответствовать нашей странице. Согласно соответствующему тесту:

  • Адаптация контейнера, вы можете использоватьvw
  • Адаптация текста, вы можете использоватьvw
  • больше, чем1pxможно использовать границы, закругленные углы, тениvw
  • Внутренние и внешние расстояния, вы можете использоватьvw

Есть еще одна деталь, которую нужно предложить специально, например, у нас есть такая конструкция:

Если мы используем напрямую:

[w-188-246] {
    width: 188px;
}
[w-187-246]{
    width: 187px
}

Конечный эффект будет[w-187-246]Высота контейнера меньше[w-188-246]Высота контейнера. В этот момент мы должны рассмотретьМасштабирование соотношения сторон контейнера. На этот счет есть много решений, но я все же рекомендую инструменты для решения этой проблемы.Вот я рекомендую плагин PostCSS, написанный моей сестрой.postcss-aspect-ratio-mini. Этот плагин очень прост в использовании и не требует никакой настройки, вам нужно только установить его локально. При использовании следующим образом:

[aspectratio] {
    position: relative;
}
[aspectratio]::before {
    content: '';
    display: block;
    width: 1px;
    margin-left: -1px;
    height: 0;
}

[aspectratio-content] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
[aspectratio][aspect-ratio="188/246"]{
    aspect-ratio: '188:246';
}

Скомпилировано:

[aspectratio][aspect-ratio="188/246"]:before {
    padding-top: 130.85106382978725%;
}

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

В настоящее время внедрение плагина PostCSS является лишь переходным этапом, в будущем мы сможем использовать его непосредственно в CSS.aspect-ratioсвойство для реализации соотношения сторон.

решать1pxплан

Как упоминалось ранее, для1pxНе рекомендуется преобразовывать его в соответствующийvwединица, но под Retina нам всегда приходится сталкиваться с тем, как решать1pxПроблема. существует"Давайте снова поговорим о Retina1pxрешение"В статье представлены различные решения1pxплан. В этом случае я лично рекомендую другое решение1pxплан. Все еще использую плагин PostCSS для решения1pxможно использоватьpostcss-write-svg.

С postcss-write-svg вы можете пройтиborder-imageилиbackground-imageДва способа справиться с этим. Например:

@svg 1px-border {
    height: 2px;
    @rect {
        fill: var(--color, black);
        width: 100%;
        height: 50%;
    }
}
.example {
    border: 1px solid transparent;
    border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
}

Таким образом, PostCSS автоматически скомпилирует CSS для вас:

.example {
    border: 1px solid transparent;
    border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E") 2 2 stretch;
}

Использовать плагины PostCSS проще и удобнее, чем модифицировать изображения.

Вышеприведенное демонстрирует использованиеborder-imageобразом, помимо использованияbackground-imageреализовать. Например:

@svg square {
    @rect {
        fill: var(--color, black);
        width: 100%;
        height: 100%;
    }
}

#example {
    background: white svg(square param(--color #00b1ff));
}

Скомпилировано:

#example {
    background: white url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='%2300b1ff' width='100%25' height='100%25'/%3E%3C/svg%3E");
}

Это решение простое и удобное в использовании, и это то, что мне нужно. Пока что он может в основном удовлетворить мои потребности. Но не забывайте об одном, помните<head>добавлять:

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />

Выше описаны технические моменты, используемые в этой схеме адаптации, кратко изложенные:

  • использоватьvwЧтобы добиться адаптации страницы, и через плагин PostCSSpostcss-px-to-viewportПучокpxпреобразовать вvw. Преимущество этого в том, что когда мы кодируем, нам не нужно делать никаких расчетов, вам нужно только писать в соответствии с проектными чертежами.pxединица измерения
  • Чтобы лучше реализовать соотношение сторон, особенно дляimg,vedioиiframeэлементы через плагин PostCSSpostcss-aspect-ratio-miniДля достижения реального использования нужно только написать соответствующую ширину и высоту
  • чтобы решить1pxПроблема с использованием плагина PostCSSpostcss-write-svg, Автоматически генерируетсяborder-imageилиbackground-imageкартинка

Здесь используется несколько плагинов PostCSS На самом деле, есть много отличных плагинов PostCSS, которые могут помочь нам решить многие проблемы. Если у вас никогда не было никаких знаний о PostCSS, я предлагаю вам потратить некоторое время на его изучение W3cplus предоставляет некоторую полезную информацию.Статьи о PostCSS. Если вы хотите систематически изучать знания, связанные с PostCSS, рекомендуется приобрести "Погружение в веб-дизайн PostCSS"Эта книга:

Обработка понижения версии

Как упоминалось в начале, до сих пор в T30 есть несколько моделей, которые не поддерживаютvwплан адаптации. Итак, если бизнес нуждается в этом, как с этим справиться? Есть два способа справиться с понижением рейтинга:

Где Viewport терпит неудачу

использоватьvwЧтобы сделать адаптационную обработку не только преимущества без каких-либо недостатков. В некоторых деталях еще есть недочеты. например, когда контейнер используетсяvwединица измерения,marginиспользоватьpxблок, легко привести к тому, что общая ширина превысит100vw, что влияет на эффект макета. Для подобных явлений мы можем использовать соответствующие технологии, чтобы избежать их. такой какmarginзаменитьpadding, и совпадатьbox-sizing. Но это не лучшее решение, с будущим браузером или приложением собственной пары Webviewcalc()После того, как функция будет поддерживаться, столкнитесьvwиpxПри совместном использовании его можно комбинироватьcalc()работать вместе, так что это может быть решено отлично.

также,pxпреобразовать вvwЕдиница, определенная разница в пикселях все равно будет, ведь во многих случаях она не может быть полностью делима.

Два недостатка, которые я нашел до сих пор. Возможно, при более позднем использовании будут какие-то другие непреднамеренные ямы. То же самое: независимо от плана, чем больше вы на него наступаете, тем сильнее он становится. Я надеюсь, что студенты, которым нравится этот план адаптации, вместе со мной ступят на яму, чтобы сделать его более совершенным.

Как узнать, поддерживает ли ваше приложение его

Хотя на примере этой бумаги было проведено много тестов. Тем не менее, многие студенты все еще беспокоятся о том, поддерживает ли их приложение APP это решение, и не осмеливаются попробовать или смело использовать его. На самом деле не о чем беспокоиться, вы можете взять свое устройство или отсканировать следующий QR-код с помощью приложения:

Когда страница завершит выполнение теста, найдите соответствующийValues and UnitsПункт списка:

еслиvwЕсли полоса зеленая, ваше устройство или приложение поддерживает схему, в противном случае — нет. Кроме того, вы также можете следитьcss3testДля связанных обновлений тестовый код будет обновлен в соответствии с соответствующими спецификациями позже, чтобы вы могли быстро понять, какие свойства можно смело использовать.

Суммировать

Схема адаптации страниц H5 всегда болезненна, как и собственно верстка страницы всегда болезненна. Но технологии постоянно совершенствуются, и мы можем попытаться применить эти новые функции к реальным проектам, поскольку мы уделяем внимание новым технологиям, и только таким образом наше решение проблемы будет становиться все более и более совершенным.

На момент написания этой статьи, хотя все еще есть одна или две модели, которые не поддерживаютvw, но это не влияет на наше использование. Вы можете добиться прогресса, только если будете продолжать пытаться. Здесь я надеюсь, что каждый будет стараться смело и вместе делать программу более совершенной. Если у вас есть лучшие предложения или вы наступили на какие-либо ямы, поделитесь ими со мной в комментариях ниже или напишите мне, чтобы обсудить вместе.

пустыня

По прозвищу «Да Мо», основатель W3CPlus, в настоящее время работает в Hand Tao. У него очень глубокое понимание и богатый практический опыт работы с интерфейсными языками сценариев, такими как HTML5, CSS3 и Sass, особенно с упором на исследования CSS3.Он является первой группой людей, изучающих и использующих технологию CSS3 в Китай. Китайский проповедник CSS3, Sass и Drupal. Опубликовано в 2014 г.Графический CSS3: основная технология и практические примеры".

Если вам необходимо перепечатать, пожалуйста, укажите источник:Woohoo. Я 3 от prussian.com/CSS/VW-foru-…