介绍
小编给大家分享一下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; !——填充比;
& lt; svg类=發ayer"viewBox=? 0 1080 1920“;preserveAspectRatio=皀one"比;& lt; !——容器——比;
& lt;矩形x=?”;y=?”;宽度=?080”;身高=?920”;填补=皉gba(96、96、96、。08)“/比;& lt; !——元素——比;
& lt;/svg>
& lt; !——包含居中——比;
& lt; svg类=發ayer"viewBox=? 0 1080 1920“;preserveAspectRatio=皒MidYMid meet"比;& lt; !——容器——比;
& lt;矩形x=?”;y=?33”;宽度=?080”;身高=?407”;填补=? 1565 c0"/比;& lt; !——元素——比;
& lt;/svg>
& lt; !——包含居底——比;
& lt; svg类=發ayer"viewBox=? 0 1080 1920“;preserveAspectRatio=皒MidYMax meet"比;& lt; !——容器——比;
& lt;矩形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 f=(h/g) *
当包含方式适配时
缩放值s=数学。min (f/g, u/v)
横向左留白占总留白o=(m * v - x)/w
纵向上留白占总留白p=(n * g - y)/h
当盖方式适配时
缩放值s=数学。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)
