Дизайн отличный, на этот раз он действительно основан на эскизном проекте, ведь теперь любая машина - это стандартная машина по эскизному проекту! Одноклассники-разработчики, теперь вы можете просто прочитать аннотации к дизайн-проекту напрямую!
ЭкранизацияЭкранная адаптация должна относиться к взаимосвязи адаптации между областью адаптации контента и интервалом экрана.
Одноэкранная адаптация включает в себя включение, закрытие или заполнение, а многоэкранная адаптация обычно основана на ширине.
Содержать и покрыть также необходимо позиционировать, чтобы справиться с пустым пространством и избыточным контентом.
Разный контент в одном и том же H5 часто использует разные методы адаптации, то есть наслоение.
Предпочитаемый CSSЕсли проблемы с производительностью, такие как экранная адаптация, можно реализовать с помощью CSS, их следует реализовать с помощью CSS.
Адаптация всего слояЧтобы обеспечить синхронное масштабирование элементов каждого слоя без искажений, область адаптации каждого слоя должна быть равна размеру эскизного проекта.
Прямая реализация — построить контейнер того же размера, что и область адаптации, и адаптировать весь слой.
В контейнере может быть несколько элементов с одинаковым методом адаптации.
Возьмем в качестве примера реализацию svg :
<!doctype html><html><body><style>.layer { позиция: абсолютное; верхнее: 0; ширина: 100%; высота: 100%;</style><!-- fill - -><svg class=layer viewBox=0 0 1080 1920 saveAspectRatio=none> <!-- контейнер--> <rect x=0 y=0 width=1080 height=1920 fill=rgba(96,96,96,.08)/> <!-- element--></svg><!-- contains center--><svg class=layer viewBox=0 0 1080 1920 saveAspectRatio=xMidYMid meet> <!-- контейнер--> <rect x=0 y=233 ширина=1080 height=1407 fill=#1565C0/> <!-- element--></svg><!-- continue --><svg class=layer viewBox=0 0 1080 1920 saveAspectRatio=xMidYMax meet> <!- - Контейнер --> <rect x=444 y=1779 ширина=191 высота=39 fill=#1565C0/> <!-- Элемент--></svg></body></html>Фактический эффект:
Адаптацию всего слоя легко реализовать, а значения проекта проекта считываются непосредственно во время разработки, что может удовлетворить потребности большинства статических страниц.
Но когда имеется много анимаций h5, необходимо учитывать плавность анимации и производительность страницы.
Используйте заменяемые элементы, такие как <img> <object> <svg> в качестве контейнеров, а в качестве элементов — фоновые изображения.
При применении CSS-анимации возникают проблемы с производительностью:
Чтобы повысить производительность этих реализаций, нам нужно сосредоточиться на анимации контейнера и уменьшить размер контейнера. Лучше всего, чтобы минимальная общая площадь всех элементов в слое была равна минимальной, чтобы добиться упрощенной адаптации.
Упрощенная адаптация формулаПроцесс вывода см. в разделе «Вывод формулы многоуровневой экранной адаптации H5».
Ширина эскиза — v, высота — g. Горизонтальная координата элемента до адаптации — x. Ширина — w. Горизонтальная координата контейнера — h. x3 = 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, когда содержат При адаптации метода значение масштабирования s = Math.min(f/g, u/v). Горизонтальное левое пустое пространство соответствует общему пустому пространству o = (m*v - x)/w Вертикальное пустое пространство составляет общее количество пробелов p = ( n*g- y)/h При адаптации режима покрытия значение масштабирования s = Math.max(f/g, u/v) Горизонтальное левое превышение учитывает общее превышение o = (x - m*v)/w Вертикальное Избыток составляет общий избыток p = (y - n*g)/h. Когда область адаптации расположена вертикально вверху, m = 0. Когда она вертикально центрирована, m = 0,5. Когда она расположена вертикально внизу, m = 1. Когда он расположен горизонтально слева, n = 0. Когда он горизонтально центрирован, n = 0,5. Если горизонтально справа, n = 1 по сравнению с оптимизацией памяти адаптации всего уровня (w3*h3)/(v1*g1) >= w*h/(v*g)пример реализации <img>
Когда максимальная ширина равна w/v, а максимальная высота — h/g, это соответствует адаптации содержания.
Когда для минимальной ширины установлено значение w/v, а для минимальной высоты установлено значение h/g, это соответствует адаптации обложки.
Если ширина равна w/v, а высота — h/g, это означает адаптацию заполнения.
Если во время адаптации содержания исходный размер изображения меньше максимальной ширины и максимальной высоты, используйте масштабирование: 10, чтобы увеличить или напрямую изменить исходный размер изображения.
Если во время адаптации обложки исходный размер изображения превышает минимальную ширину и минимальную высоту, используйте масштаб: .1, чтобы уменьшить или напрямую изменить исходный размер изображения.
Поскольку процент в левом верхнем углу относится к ширине экрана u и высоте f, он соответствует m*u и n*f.
Поскольку процент преобразования зависит от ширины 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 */мин-высота: 7.395833333333333%; /* h3 = (h/g)*f где h = 142, g = 1920 */ масштаб: .1; /* x4 = m*u + (x - m*v)/w*w1 */ /* y4 = n*f + (y - n*g)/h*h1 */ позиция: абсолютная; слева: 50%; где m = .5*/ верх: 50%; /* n*f где n = .5 */ преобразование: 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 = 0,5, g = 1920, h = 142 */</style><img src=http:/ /ui.qzone.com/544x142/> <!-- Элемент --></body></html> пример фоновой реализацииbackground-size contain оно соответствует содержанию адаптации.background-size равно cover оно соответствует адаптации обложки.background-size равно 100% 100% соответствует «адаптации заполнения».background-position имеет то же p , что и o <!doctype html><html><body><style>div { Position: Absolute; width: 50.37037037037037%; /* w3 = w/v*u где w = 544, v = 1080 */ height: 7.39583333333333% /; * h3 = h/g*f где h = 142, g = 1920 */ background: url(http://ui.qzone.com/544x142) no-repeat /* Фоновое изображение как элемент*/ размер фона: обложка слева: 25.64814814814815%; u где x = 277, v = 1080 */ верх: 78,02083333333333%; /* y3 = y/g*f, где y = 1498, g = 1920 */ background-position-x: -48,34558823529412%; /* o = (x - m*v)/w, где m = 0,5. , v = 1080, x = 277, w = 544*/background-position-y: 378,8732394366197% /* p = (y - n*g)/h, где n = 0,5, g = 1920, y = 1498, h = 142*/</style>< div></div> <!-- Контейнер--></body></html>пример реализации <svg>
meetOrSlice из preserveAspectRatio meet это соответствует содержанию адаптации.meetOrSlice из preserveAspectRatio является slice это соответствует адаптации покрытия.preserveAspectRatio равно none , оно соответствует адаптации заполнения.meetOrSlice для preserveAspectRatio относится к контейнеру, а не для его transform используется область адаптации, а meetOrSlice для preserveAspectRatio фиксируется значение xMinYMin . <!doctype html><html><body><style>svg { Position: Absolute; ширина: 50.37037037037037%; высота: 7.39583333333333%; /* x4 = m*v/w*w3 + (x - m*v)/ w*w1 */ /* y4 = n*g/h*h3 + (y - n*g)/h*h1 */ сверху: 0; слева: 0; Transform:translateX(99.26470588235294%) /* m*v/w*w3 где m = 0,5, v = 1080, w = 544 */translateY (676,056338028169%) /* n*g/h*h3, где n = 0,5, г; = 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 saveAspectRatio=xMinYMin meet> <!-- Контейнер--> <ширина изображения=544 высота=142 xlink:href=http://ui.qzone.com/544x142/> <!-- Элемент --></svg></body></html> Вспомогательные инструментыТрудно вручную рассчитывать проценты и писать CSS. Вы можете использовать такие инструменты, как Sass, чтобы упростить это.
Ширина v и высота g черновика проекта обычно являются константами на уровне страницы.
Просто прочитайте абсциссу x , ординату y , ширину w и высоту h каждого элемента в черновике проекта, а затем инструмент сгенерирует CSS.
Теперь моей маме больше не придется беспокоиться о моих проблемах с восстановлением или экранизацией.
обработка текста Текст фиксирован или одна строка не фиксирована, text тег svg может это обработать.
Если текст фиксирован или не закреплена одна строка, вы также можете преобразовать текст в картинки.
Несколько строк текста не фиксируются. Вы можете использовать foreignObject svg для встраивания обычных div
Сравнение планов
Существует множество решений экранной адаптации. Какой метод выбрать для достижения полноуровневой адаптации или упрощенной адаптации? Ниже приводится сравнение.
| план | Увеличить | позиция | масштабирование текста | совместимый |
|---|---|---|---|---|
| верхний процент отступа | Можно только быть снисходительным | ✓ | ✗ | ✓ |
| область просмотра | ✓ | ✗ | ✓ | Поддержка — это сложно |
| соответствие объекта | ✓ | ✓ | ✗ | Мобильный Android 4.4.4+ |
| svg saveRatio | ✓ | ✓ | ✓ | Мобильный Android 3.0+ |
| (макс/мин)-(ширина/высота) | ✓ | ✓ | фиксированный текст | ✓ |
| размер фона | ✓ | ✓ | Текст в картинку | ✓ |
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.