Передний круг действительно грязный, что вовсе не является ложью. Но преимущества хаоса — это хаос, хаос ведет к изменениям, а есть изменения для достижения прогресса. Сегодня все та же старая мелодия, говорящая об адаптации мобильных страниц. Потому что для фронтенда, работающего со страницами каждый день (страницы 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%
-
vh
:иvw
Аналогично, это сокращение от высоты 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%;
}
Таким образом, эффект соотношения сторон может быть достигнут идеально. Принципы на этот счет здесь подробно излагаться не будут, если вам интересно, вы можете прочитать статьи, организованные ранее:
- Несколько схем для CSS для достижения соотношения сторон
- Соотношение сторон контейнера
- Как реализовать соотношение сторон в Интернете
- Реализовать принцип точного плавного набора текста
В настоящее время внедрение плагина 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
план адаптации. Итак, если бизнес нуждается в этом, как с этим справиться? Есть два способа справиться с понижением рейтинга:
-
CSS Houdini:пройти черезCSS Houdiniпротив
vw
сделать обработку, звонитеCSS Typed OM Level1который предоставилCSSUnitValue
API. -
CSS Polyfill: Выполните соответствующую обработку через соответствующий Polyfill, в настоящее время для
vw
В состав Полифилла в основном входят:vminpoly,Viewport Units Buggyfill,vunits.jsиModernizr. Личная рекомендацияViewport Units Buggyfill
Где 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-…