介绍
本篇文章为大家展示了怎么在html5中实现分层屏幕适配,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
<强>屏幕适配
屏幕适配应当指内容适配区和屏幕区间的适配关系。
单屏适配有包含覆盖或填补,多屏常见是依宽。
包含和封面还需要定位来处理留白和超出的内容。
而同一个H5里不同内容往往用不同适配方式,即分层。
<>强优选CSS
<李> 页面加载后js往往需要延时至少70毫秒才能获取正确的webview宽高
<李> CSS往往最先执行,且cssom的解析往往和dom在最开始并行构建
<李> js会等待dom和cssom处理完后才能执行,而CSS只需等待dom
<李> 相比js在切换横竖屏时要切换2次进程来重绘,CSS无需切换
对于屏幕适配这类表现问题,能用CSS实现就应该用CSS实现。
<强>整层适配
为确保各层元素同步缩放,不走样,每层的适配区应当等于设计稿大小。
直接的实现就是构造和适配区一样尺寸的容器,整层适配。
容器内可以有若干个相同适配方式的元素。
以svg <代码> 实现为例:
& lt; ! doctype html>
& lt; html>
& lt; body>
& lt; style>
.layer {
位置:才能,绝对;
,,:0;
,,左:0;
,,宽度:100%;
,,身高:100%;
}
& lt;/style>
& lt; !——, fill ——比;
& lt; svg 类=發ayer", viewBox=?, 0, 1080, 1920,, preserveAspectRatio=皀one"祝辞,& lt; !——,容器,——比;
& lt;才能rect x=?“, y=?“,宽度=?080“,身高=?920“,填补=皉gba(96、96、96、。08)“/祝辞,,& lt; !——,元素,——比;
& lt;/svg>
& lt; !——, contain 居中,——比;
& lt; svg 类=發ayer", viewBox=?, 0, 1080, 1920,, preserveAspectRatio=皒MidYMid meet"祝辞,& lt; !——,容器,——比;
& lt;才能rect x=?“, y=?33“,宽度=?080“,身高=?407“,填补=? 1565 c0"/祝辞,,& lt; !——,元素,——比;
& lt;/svg>
& lt; !——, contain 居底,——比;
& lt; svg 类=發ayer", viewBox=?, 0, 1080, 1920,, preserveAspectRatio=皒MidYMax meet"祝辞,& lt; !——,容器,——比;
& lt;才能rect x=?44“, y=?779“,宽度=?91“,身高=?9“,填补=? 1565 c0"/祝辞,,& lt; !——,元素,——比;
& lt;/svg>
& lt;/body>
& lt;/html> 实际效果:
整层适配实现简单,开发时直接读取设计稿值,可以满足大部分静态页面需求。
但在代替动画多的时候,就得考虑动画流畅,页面性能了。
用可替换元素如<代码> & lt; img> <代码> & lt; object> <代码> & lt; 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 *
纵才能坐标,y4 =, n * f +, y 安康;n * g/h * h2 =, n * g/h * h4 +, y 安康;n * g/h * h2
宽才能,w3 =, (w/v) *
高才能,h4 =, (h/g) * f
当才能,contain 方式适配时
,,,缩放值,s =, Math.min (f/g, u/v)
,,,横向左留白占总留白,o =, (m * v 安康;x)/w
,,,纵向上留白占总留白,p =,, (n * g 安康;y)/小时
当才能,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 * h4)/(v1 * g1),祝辞=,w * h/(v * g)
