Многоуровневая адаптация экрана H5

внешний интерфейс JavaScript Android CSS

Пожалуйста, укажите источник:Также Ли/2018/03/14/…

Дизайн отличный, в этот раз действительно "по эскизному проекту", ведь сейчас любая машина - это эталонная машина конструкторского чертежа! Одноклассники по разработке, теперь вы можете просто читать аннотации проекта дизайна напрямую!

экранизация

Экранизация должна относиться к содержаниюОбласть адаптациииобласть экранасоответствующие отношения между. Одноэкранная адаптация имеетcontain,coverилиfill, многоэкранныйИкуань.containиcoverпо-прежнему необходимодолжностьдля обработки пробелов и избытка. Однако для разного контента в одном и том же H5 часто используются разные методы адаптации, т. е.Слоистый.

Предпочтительный CSS

  • После загрузки страницы js часто требуется задержка не менее 70 мс, чтобы получить правильную ширину и высоту веб-просмотра.
  • css часто выполняется первым, а парсинг cssom часто строится параллельно с dom в начале
  • js будет ждать обработки dom и cssom перед выполнением, в то время как css нужно дождаться только dom
  • По сравнению с js, ему нужно переключать 2 процесса для перерисовки при переключении между горизонтальным и вертикальным экранами, а css не нужно переключать.

Для проблем с производительностью, таких как экранная адаптация, если это можно реализовать с помощью css, это следует реализовать с помощью css.

Адаптация всего слоя

Для того, чтобы обеспечить синхронное масштабирование элементов каждого слоя без алиасинга,Область адаптацииДолжен быть равен размеру проектного чертежа. Непосредственная реализация заключается в построении иОбласть адаптациитот же размерконтейнер,Адаптация всего слоя.контейнерОдинаковых способов адаптации может быть несколькоэлемент. отsvgПример реализации:

<!doctype html>
<html>
<body>
<style>
.layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
<!-- fill -->
<svg class="layer" viewBox="0 0 1080 1920" preserveAspectRatio="none"> <!-- 容器 -->
  <rect x="0" y="0" width="1080" height="1920" fill="rgba(96,96,96,.08)"/>  <!-- 元素 -->
</svg>
<!-- contain 居中 -->
<svg class="layer" viewBox="0 0 1080 1920" preserveAspectRatio="xMidYMid meet"> <!-- 容器 -->
  <rect x="0" y="233" width="1080" height="1407" fill="#1565C0"/>  <!-- 元素 -->
</svg>
<!-- contain 居底 -->
<svg class="layer" viewBox="0 0 1080 1920" preserveAspectRatio="xMidYMax meet"> <!-- 容器 -->
  <rect x="444" y="1779" width="191" height="39" fill="#1565C0"/>  <!-- 元素 -->
</svg>
</body>
</html>

фактический эффект:

Адаптация всего слояРеализация проста, и значение черновика дизайна считывается непосредственно во время разработки, что может удовлетворить потребности большинства статических страниц. Но когда есть много анимаций h5, вы должны учитывать плавность анимации и производительность страницы. со сменными элементами, такими как<img> <object> <svg>ждать, чтобы сделатьконтейнер, и сделайте это с фоновым изображениемэлементиз, Существуют подводные камни производительности при применении CSS-анимации:

  • правильноконтейнерВнутриэлементПрименение CSS-анимации вызовет частые перекомпоновки и перерисовки, что приведет к заиканиям.
  • воля иОбласть адаптациитот же размерконтейнерПри обновлении до синтетического слоя занимает слишком много памяти, и память удваивается столько слоев, сколько есть.

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

Упрощенная адаптация

формула

Процесс получения см.Вывод формулы многоуровневой адаптации экрана H5

设计稿
  宽 v
  高 g
  
适配前元素
  横坐标 x
  纵坐标 y
  宽 w
  高 h

适配后容器
  横坐标 x3 = x*u/v
  纵坐标 y3 = y*f/g

适配后元素
  横坐标 x4 = m*u + (x - m*v)/w*w1 = m*v/w*w3 + (x - m*v)/w*w1
  纵坐标 y4 = n*f + (y - n*g)/h*h1 = n*g/h*h3 + (y - n*g)/h*h1
  宽 w3 = (w/v)*u
  高 h3 = (h/g)*f
  当 contain 方式适配时
    缩放值 s = Math.min(f/g, u/v)
    横向左留白占总留白 o = (m*v - x)/w
    纵向上留白占总留白 p =  (n*g - y)/h
  当 cover 方式适配时
    缩放值 s = Math.max(f/g, u/v)
    横向左超出占总超出 o = (x - m*v)/w
    纵向上超出占总超出 p =  (y - n*g)/h

适配区
  垂直居顶时 m = 0
  垂直居中时 m = .5
  垂直居底时 m = 1 
  水平居左时 n = 0
  水平居中时 n = .5
  水平居右时 n = 1 

相比整层适配内存优化 (w3*h3)/(v1*g1) >= w*h/(v*g)

Пример реализации

  • При установке max-width наw/v, максимальная высотаh/gсоответствующий времениcontainприспособление.
  • При установке минимальной шириныw/v, минимальная высотаh/gсоответствующий времениcoverприспособление.
  • При установке ширины наw/v, высотаh/gвремяfillприспособление.
  • containПри адаптации, если исходный размер изображения меньшеmax-widthиmax-heightкогда, сzoom: 10Увеличьте или напрямую измените исходный размер изображения.
  • coverПри адаптации, если исходный размер изображения большеmin-widthиmin-heightкогда, сzoom: .1Уменьшите или напрямую измените исходный размер изображения.
  • так какtop leftСредний процент относится к ширине экранаuи высокийfда, соответствуетm*uиn*f
  • так какtransformСредний процент относится к ширине элемента после адаптацииw1и высокийh1да, соответствует(m*v + x)/w*w1 和 (n*f + y)/h*h1 
<!doctype html>
<html>
<body>
<style>
img {
  /* min-width 和 min-height 构成了虚拟的容器 */
  min-width: 50.37037037037037%; /* w3 = (w/v)*u 其中 w = 544，v = 1080 */
  min-height: 7.395833333333333%; /* h3 = (h/g)*f 其中 h = 142，g = 1920 */
  zoom: .1;
  /* x4 = m*u + (x - m*v)/w*w1 */
  /* y4 = n*f + (y - n*g)/h*h1 */
  position: absolute;
  left: 50%; /* m*u 其中 m = .5*/
  top: 50%; /* n*f 其中 n = .5 */
  transform:
    translateX(-48.34558823529412%) /* (x - m*v)/w*w1 其中 x = 277，m = .5，v = 1080，w = 544 */
    translateY(378.8732394366197%); /* (y - n*g)/h*h1 其中 y = 1498，n = .5，g = 1920，h = 142 */
}
</style>
<img src="http://ui.qzone.com/544x142"/> <!-- 元素 -->
</body>
</html>

пример фоновой реализации

  • background-sizeзначениеcontainсоответствующий времениcontainприспособление.
  • background-sizeзначениеcoverсоответствующий времениcoverприспособление.
  • background-sizeзначение100% 100%соответствующий `fillприспособление.
  • background-positionпроцент иo pто же самое значение
<!doctype html>
<html>
<body>
<style>
div {
  position: absolute;
  width: 50.37037037037037%; /* w3 = w/v*u 其中 w = 544，v = 1080 */
  height: 7.395833333333333%; /* h3 = h/g*f 其中 h = 142，g = 1920 */
  background: url(http://ui.qzone.com/544x142) no-repeat; /* 背景图做元素 */
  background-size: cover;
  left: 25.64814814814815%; /* x3 = x/v*u 其中 x = 277， v = 1080 */
  top: 78.02083333333333%; /* y3 = y/g*f 其中 y = 1498， g = 1920 */
  background-position-x: -48.34558823529412%; /* o = (x - m*v)/w 其中 m = .5 ， v = 1080，x = 277，w = 544*/
  background-position-y: 378.8732394366197%; /* p = (y - n*g)/h 其中 n = .5 ， g = 1920，y = 1498，h = 142*/
}
</style>
<div></div> <!-- 容器 -->
</body>
</html>

Пример реализации

  • preserveAspectRatioизmeetOrSliceзаmeetсоответствующий времениcontainприспособление.
  • preserveAspectRatioизmeetOrSliceзаsliceсоответствующий времениcoverприспособление.
  • preserveAspectRatioзначениеnoneсоответствующий времениfillприспособление.
  • здесьpreserveAspectRatioизmeetOrSliceОтносительное — это вместилище, а неОбласть адаптациииспользовать здесьtransformнайти иpreserveAspectRatioизmeetOrSliceисправлено какxMinYMin.
<!doctype html>
<html>
<body>
<style>
svg {
  position: absolute;
  width: 50.37037037037037%;
  height: 7.395833333333333%;
  /* x4 = m*v/w*w3 + (x - m*v)/w*w1 */
  /* y4 = n*g/h*h3 + (y - n*g)/h*h1 */
  top: 0;
  left: 0;
  transform:
    translateX(99.26470588235294%) /* m*v/w*w3 其中 m = .5，v = 1080，w = 544 */
    translateY(676.056338028169%); /* n*g/h*h3 其中 n = .5，g = 1920，h = 142 */
    overflow: visible;
}
svg image {
  transform:
    translateX(-48.34558823529412%) /* (x - m*v)/w*w1 其中 x = 277，m = .5，v = 1080，w = 544 */
    translateY(378.8732394366197%); /* (y - n*g)/h*h1 其中 y = 1498，n = .5，g = 1920，h = 142 */
}
</style>
<svg viewBox="0 0 544 142" preserveAspectRatio="xMinYMin meet"> <!-- 容器 -->
  <image width="544" height="142" xlink:href="http://ui.qzone.com/544x142"/> <!-- 元素 -->
</svg>
</body>
</html>

Вспомогательные инструменты

Вычислять проценты вручную и писать css очень хлопотно, для упрощения можно использовать такие инструменты, как sass. Расчетная ширина проектаvвысокийgОбычно константы уровня страницы. Просто прочитайте каждый проект дизайнаэлементабсциссаx,ось Yy,ширинаwи высокийh, а затем инструмент может генерировать css. Теперь моей маме больше не нужно беспокоиться о моих проблемах с восстановлением и проблемами экранизации.

обработка текстов

  • Текст зафиксирован или не зафиксирована ни одна строка,svgизtextтеги могут обрабатывать
  • Текст фиксируется или не фиксируется одна строка, а текст можно преобразовать в картинку
  • Многострочный текст не исправлен, можно использоватьsvgизforeignObjectВстроить обычныйdiv

Сравнение схем

Схем экранизации много, какой метод выбрать для достиженияАдаптация всего слояилиУпрощенная адаптация, далее сравнение

план зум должность масштабирование текста совместимый
процент заполнения Икуань ✓ ✗ ✓
viewport ✓ ✗ ✓ Поддержка сложная
object-fit ✓ ✓ ✗ Мобильный андроид 4.4.4+
svg preserveRatio ✓ ✓ ✓ Мобильный андроид 3.0+
(max/min)-(width/height) ✓ ✓ фиксированный текст ✓
background-size ✓ ✓ Текст к картинке ✓
Категории