html5 分层屏幕适配的要领
|
副问题[/!--empirenews.page--]
计划大大，这次真的是 "按计划稿来" 了，由于此刻，任何机子都是计划稿尺度机！ 开拓同窗，这下你就直接读计划稿标注就好了啦！ 屏幕适配 屏幕适配该当指内容 适配区 和 屏幕区 间的适配相关。 单屏适配有 contain、cover 或 fill，多屏常见是 依宽 。 contain 和 cover 还必要 定位 来处理赏罚留白和超出的内容。 而统一个 H5 里差异内容每每用差异适配方法，即 分层。 优选CSS 页面加载后 js 每每必要延时至少 70ms 才气获取正确的 webview 宽高 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) <img> 实现示例 <!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://www.jb51.net/html5/"http:/ui.qzone.com/544x142"/> <!-- 元素 --> </body> </html> background 实现示例 background-size 值为 contain 时对应 contain 适配。 background-size 值为 cover 时对应 cover 适配。 background-size 值为 100% 100% 时对应 `fill 适配。 background-position 百分比和 o p 意义沟通 （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
