H5 должен знать и должен знать проект реставрации на уровне пикселей

APP HTML

Эта статья является второй в серии «H5 должен знать, должен знать». Мы упоминали, что так называемая «H5» должна быть аббревиатурой HTML5. Однако в Китае «H5» не так прост, как аббревиатура HTML5, он больше используется для обозначения веб-страниц, встроенных в мобильные приложения. Независимо от того, есть ли «H5» в зарубежных странах (не должно быть), в Китае, пока вы говорите о веб-странице или приложении веб-страницы, встроенном в приложение, вы можете сказать, что это «H5». Как только упоминается «H5», все понимают, что такое «H5».

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

Так в чем же разница между веб-страницей на мобильном телефоне и веб-страницей на большом экране?

Прежде всего, веб-страница на мобильном телефоне запускается в браузере мобильного телефона или в WebView, встроенном в приложение, и может использовать уникальные аппаратные возможности мобильного телефона, такие как GPS, акселерометр, гироскоп и другие датчики; кроме того, если загружен JSSDK хост-приложения, вы также можете получить доступ к различным возможностям, предоставляемым приложением на веб-странице, таким как получение информации о вошедшем в систему пользователе, загрузка и обмен фотографиями и т. д.

Во-вторых, дизайн макета веб-страниц на мобильных телефонах должен соответствовать спецификациям дизайна интерфейса (UI) нативных приложений, таким как плоский дизайн Google Material Design, руководство Apple по человеческому интерфейсу (Human Interface Guide) и т. д.; интерфейс собственного приложения, в том числе использование тех же компонентов макета, значков шрифтов, цветовых схем и даже режимов взаимодействия, что и собственное приложение, например, поддержка сенсорного взаимодействия, а не щелчка мыши.

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

Третий пункт выше — это как раз тот контент, который обсуждался в первой статье этой серии «Взаимодействие с приложением H5, которое необходимо знать», и заинтересованные студенты могут обратиться к нему позже. Итак, сегодня в этой статье будет обсуждаться второй пункт выше, а именно, как реалистично и на уровне пикселей восстановить проект дизайна, когда H5 создает макет страницы.

Адаптация и восстановление: пояснение концепции

Говоря о восстановлении, мы должны начать с адаптации.

Есть два основных аспекта адаптации H5 к мобильным телефонам:

  • Адаптация к различной плотности пикселей
  • Адаптироваться к разным размерам экрана

Плотность пикселей, как следует из названия, — это количество физических пикселей, соответствующих 1 пикселю в CSS. Мы используем эту сравнительную таблицу экранов каждого поколения iPhone (источник:www.paintcodeapp.com/news) Например:

Первый взгляд на iPhone Xs Max и iPhone XR. Первый экран имеет размер 414x896 в пикселях CSS, в то время как фактический размер физического рендеринга в пикселях составляет 1242x2688 пикселей.Простое преобразование показывает, что 1242/414 = 3 (или 2688/896 = 3). Другими словами, iPhone Xs Max — это то, что люди часто называют экраном 3x (или @3x), что означает, что каждый пиксель CSS соответствует 9 физическим пикселям (поскольку ширина и высота равны 3 пикселям). С другой стороны, iPhone XR часто называют экраном 2x (или @2x), где каждый пиксель CSS соответствует 4 физическим пикселям.

Конечно есть и 1x экран. Последний iPhone 2G/3G/3GS на картинке выше — это экран 1x, то есть каждый пиксель CSS соответствует 1 физическому пикселю. iPhone первого поколения, который считается вымершим на рынке, не нуждается в адаптации, потому что 1 пиксель CSS соответствует 1 физическому пикселю на экране. (Конечно, большие экраны, внешние для ноутбуков и компьютеров, пока что являются экранами 1x, поэтому нам пока не нужно адаптировать плотность пикселей.)

Адаптивная плотность пикселей, о которой мы часто говорим, обычно относится к тому, как изображение может отображаться на экранах с увеличением 3x и 2x без искажений. Конечно, принцип адаптации очень прост: 1 пиксель изображения соответствует 1 физическому пикселю, и картинка не будет искажаться. В частности, допустим, исходное изображение имеет размер 500x300 пикселей (например,image@1x.jpg), то для экранов высокой плотности подходят версии 1500x900 пикселей (например,image@3x.jpg) и 1000x600 пикселей (например,image@2x.jpg). Таким образом, 1 физический пиксель соответствует 1 пикселю изображения.

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

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

Звучит просто, но сделать это непросто. Потому что здесь вопрос эскизного проекта. Например, ширина эскиза дизайна обычно составляет 750 пикселей:

При такой ширине разные компоненты страницы имеют свои размеры, например, заголовок «Speak to the Speakers» имеет размеры 112x28 пикселей:

Верхняя, правая, нижняя и левая части заголовка находятся на расстоянии 38, 289, 394 и 289 пикселей от границы текущего компонента соответственно:

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

Ответ прост: пропорционально уменьшению.

По-прежнему взяв в качестве примера предыдущий проектный чертеж, мы знаем, что ширина экрана, предполагаемая проектным проектом, составляет 750 пикселей (на самом деле, не имеет значения, сколько там пикселей, потому что мы восстанавливаем проектный проект пропорционально), и, как показано на рис. следующие изображения, этот круг. Ширина углового компонента прямоугольника составляет 690 пикселей:

Это 30 пикселей сверху (те же 30 пикселей от левой и правой границ):

С этими пиксельными данными после простого математического преобразования несложно получить:

  • Процент ширины компонента к ширине экрана: 690/750 = 0,92, или 92%;
  • Отношение верхнего, правого и левого полей компонента к ширине экрана составляет: 30/750 = 0,04, или 4%.

Что ж, теперь, пока браузер (WebView) может отображаться в соответствии с этим соотношением, наш компонент может добиться восстановления эскиза дизайна на уровне пикселей — на экране шириной 750 пикселей все пиксели компонента и его подкомпонентов. измерение может быть строго согласовано с проектом дизайна!

Что еще более важно, когда экран не 750 пикселей (на самом деле экран мобильного телефона шириной 750 пикселей еще не появился, обратите внимание на мою ширину пикселя CSS), макет страницы все еще может быть идеально адаптирован в соответствии с установленным пропорционально эскизу дизайна, то есть на большом экране все аспекты страницы будут казаться больше, а на меньшем экране весь макет будет уменьшен.

На самом деле, помимо ширины, высоты и интервала, размер текста (т.font-size), границы, тени и другие показатели также могут таким образом преобразовывать пиксели в проценты.

Итак, вышесказанное относится к концепции адаптации и восстановления. Далее перейдем от концепции к практике и посмотрим, как это реализовано технически.

Глобальная единица CSS

В описании концепции в предыдущем разделе упоминалось, что пропорциональная адаптация может восстановить эскиз проекта на уровне пикселей. Однако возможно ли на практике использовать процентные единицы непосредственно в CSS?Жаль, что ты не можешь.

Мы знаем, что согласно CSS Values ​​and Units Module Level 4 (Woohoo. I 3.org/TR/CSS-val u…)Определение:

Процентные значения всегда относятся к другой величине, например к длине. Каждое свойство, допускающее процентное значение, также определяет количество, к которому относится процентное значение. Эта величина может быть значением другого свойства того же элемента, значением атрибута элемента-предка или даже мерой контекста форматирования (например, ширина содержащего блока).

Тогда мы также знаем:

  • ширина(width),высоко(height), интервал (maring/padding) поддерживает процентные значения, но значением относительной ссылки по умолчанию является ширина содержащего блока;
  • Рамка(border) не поддерживает процентные значения;
  • Радиус угла границы (border-radius) поддерживает процентные значения, но относительное опорное значение в горизонтальном направлении — это ширина поля, а относительное опорное значение в вертикальном направлении — высота поля;
  • размер текста (font-size) поддерживает процентные значения, но относительное ссылочное значение — это значение родительского элементаfont-sizeзначение;
  • тень коробки (box-shadow) и текстовые тени (text-shadow) не поддерживает процентные значения;
  • ...

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

Во-первых, естьrem. Аналогичным образом, согласно CSS Values ​​and Units Module Level 4 (Woohoo. I 3.org/TR/CSS-val u…):

(rem) равен корневому элементу (т.е.htmlэлемент)font-sizeВычисленное значение свойства.

remВ конце концов, этоfont-size, но является глобальной единицей измерения, и за ней стоит пиксель. Если в целях адаптации, динамически изменять в соответствии с различной плотностью экранаremзначение (например,document.documentElement.style.fontSize = rem + 'px'), неужели нельзя добиться пропорциональной адаптации? Фактически, команда Ali Mobile Taobao разработала для этой цели фреймворк:GitHub.com/Ah Trouble/Церковное право…. Судя по репозиторию Github, этому фреймворку понадобилось около двух лет, и в начале 2019 года он официально объявил о выходе из эксплуатации. Потому что была найдена новая и лучшая глобальная эталонная единица:vw.

чтоvw?同样根据 CSS Values and Units Module Level 4：

(vw) равно 1% от ширины исходного содержащего блока (html-элемента).

Другими словами, можно считать, что:1vwравно ширине экрана1%. Ничего себе, это устройство, кажется, сделано специально для нас. Во-первых, это, по сути, процентная единица, например3vwЭто эквивалентно «3 процентам ширины экрана»; во-вторых, это глобальная единица, напрямую связанная с шириной экрана. Затем для двух процентных примеров, приведенных в описании концепции в предыдущем разделе, используйтеvwЕдиницы могут быть записаны непосредственно как:

  • Процент ширины компонента к ширине экрана: 690/750 = 0,92, то есть92vw;
  • Процентное отношение верхнего, правого и левого полей компонента к ширине экрана: 30/750 = 0,04, т. е.4vw.

затем мобильные браузерыvwКак насчет поддержки? По данным caniuse.com (caniuse.com/#search=vw):

т. е. поддерживаются как iOS 8+, так и Android 4.4+vw, в то время как текущие мобильные приложения обычно поддерживают iOS 9+ и Android 5+. Так, на практике использоватьvwБлок вполне рабочий. И именно к этому официально обратилась мобильная команда Taobao в начале этого года.vwПричина адаптации устройства.

Ну, единственная проблема сейчас - это ручной проект дизайна.pxприбытьvwПреобразование единиц слишком хлопотно. Однако, если вы используете Webpack для компиляции и упаковки в процессе разработки, кто-то разработал плагин postcss: postcss-px-to-viewport (уууу, эта лошадь plus.com/package/broken…). После настройки этого плагина вы можете писать CSS строго в соответствии со значением пикселя на черновике дизайна.Этот плагин отвечает за написание вашего CSSpxПеревести вvw. Таким образом, то, что мы называем «проектом реставрации на уровне пикселей», полностью открыло возможности разработки и презентации и действительно достигло «уровня пикселей»!

(Если, я просто говорю, что если у вас нет или вы не можете связать с Webpack, то вам, вероятно, также придется выполнить некоторые ручные вычисления.)

Использовать postcss-px-to-viewport

Этот раздел на самом деле не нужен. Однако для полноты картины давайте вкратце поговорим о настройке плагина postcss-px-to-viewport. Следующее содержимое взято из файла конфигурации .postcssrc.js:

module.exports = {
  "plugins": {
      // ...
    "postcss-px-to-viewport": {
      viewportWidth: 750,
      viewportHeight: 1334,
      unitPrecision: 3,
      viewportUnit: 'vw',
      selectorBlackList: ['.usepixel'],
      minPixelValue: 1,
      mediaQuery: false
    },
    // ...
  }
}

Смысл нескольких пунктов конфигурации следующий:

  • viewportWidth: ширина окна просмотра, которая устанавливается равной ширине эскиза проекта;
  • viewportHeight: высота области просмотра, просто установите любую;
  • unitPrecision: точность преобразованного значения, 3 означает сохранение 3 знаков после запятой;
  • viewportUnit: в какую единицу области просмотра конвертировать, конечно здесьvw;
  • selectorBlackList: представляет собой массив селекторов, и единица измерения пикселя в соответствующем объявлении не будет преобразована;
  • minPixelValue: минимальное значение пикселя, которое будет преобразовано только в том случае, если оно больше или равно этому значению;
  • MediaQuery: нужно ли преобразовывать пиксели в медиа-запросе.

Наконец, мы завершаем эту статью примером презентации. Это все еще черновик дизайна в начале этой статьи, или компонент прямоугольника со скругленными углами Имя класса в нашем приложении.card. Вот его исходный код CSS:

section.card {
  margin: 0 auto;
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 6px 0 rgba(0,0,0,0.02);
  text-align: center;
  padding: 38px 70px 46px;
  font-weight: 300;
 }

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

заключительные замечания

Как вторая часть серии «H5 должен знать, должен знать», в этой статье в основном обсуждается, как восстановить проект дизайна с высокой точностью и адаптировать его к различным экранам мобильных телефонов с двух точек зрения. Прежде всего, мы сначала разобрались с содержанием и целью адаптации и реставрации с теоретической или концептуальной точки зрения. Адаптация H5 в основном делится на адаптацию к разной плотности пикселей и адаптацию к разным размерам экрана. Целью адаптации является обеспечение пользовательского опыта, например, неискаженных изображений, и представление макетов страниц с одинаковыми пропорциями на экранах разного размера, что является так называемым 100% восстановлением эскиза дизайна или восстановлением на уровне пикселей. проект дизайна.

Уточняется смысл и принцип адаптации и восстановления.Следующим ключом к уровню технической реализации является поиск глобальной единицы УСБ. Мы впервые представили мобильную команду Ali Taobao на основеremФреймворк адаптации (данный фреймворк в дополнение к динамической модификацииrem, также решает проблему истинных 1-пиксельных границ), а затем вводит более общийvwБлок адаптирован. Наконец, краткое введение в автоматическую реализациюpxприбытьvwКонфигурация плагина преобразования единиц измерения postcss-px-to-viewport.

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

Категории