摘要:单屏适配有或,多屏常见是依宽。整层适配为确保各层元素同步缩放,不走样,每层的适配区应当等于设计稿大小。直接的实现就是构造和适配区一样尺寸的容器,整层适配。值为时对应适配。这下妈妈再也不用担心我还原问题屏幕适配问题了。
转载请注明出处:http://hai.li/2018/03/14/h5-screen-adaptation.html
设计大大,这次真的是 "按设计稿来" 了,因为现在,任何机子都是设计稿标准机! 开发同学,这下你就直接读设计稿标注就好了啦!
屏幕适配屏幕适配应当指内容 适配区 和 屏幕区 间的适配关系。
单屏适配有 contain、cover 或 fill,多屏常见是 依宽 。
contain 和 cover 还需要 定位 来处理留白和超出的内容。
而同一个 H5 里不同内容往往用不同适配方式,即 分层。
页面加载后 js 往往需要延时至少 70ms 才能获取正确的 webview 宽高
css 往往最先执行,且 cssom 的解析往往和 dom 在最开始并行构建
js 会等待 dom 和 cssom 处理完后才能执行,而 css 只需等待 dom
相比 js 在切换横竖屏时要切换 2 次进程来重绘,css 无需切换
对于屏幕适配这类表现问题,能用 css 实现就应该用 css 实现。
整层适配为确保各层元素同步缩放,不走样,每层的 适配区 应当等于设计稿大小。
直接的实现就是构造和 适配区 一样尺寸的 容器, 整层适配。
容器 内可以有若干个相同适配方式的 元素。
以 svg 实现为例:
</>复制代码
- .layer {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
实际效果:
整层适配 实现简单,开发时直接读取设计稿值,可以满足大部分静态页面需求。
但在 h5 动画多的时候,就得考虑动画流畅,页面性能了。
用可替换元素如
background 实现示例
background-size 值为 contain 时对应 contain 适配。
background-size 值为 cover 时对应 cover 适配。
background-size 值为 100% 100% 时对应 `fill 适配。
background-position 百分比和 o p 意义相同
</>复制代码
- 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*/
- }
preserveAspectRatio 的 meetOrSlice 为 meet 时对应 contain 适配。
preserveAspectRatio 的 meetOrSlice 为 slice 时对应 cover 适配。
preserveAspectRatio 值为 none 时对应 fill 适配。
这里 preserveAspectRatio 的 meetOrSlice 相对的是容器,不是 适配区 这里用 transform 来定位,而 preserveAspectRatio 的 meetOrSlice 固定为 xMinYMin。
辅助工具</>复制代码
- 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 */
- }
![]()
手动计算百分比及写 css 很麻烦,可以借助 sass 等工具来辅助简化。
设计稿宽 v 高 g 一般是页面级常量。
只需读取设计稿里每个 元素 的横坐标 x 、纵坐标 y 、宽 w 和 高 h,然后工具生成 css 即可。
这下妈妈再也不用担心我还原问题、屏幕适配问题了。
文字固定或单行不固定,svg 的 text 标签可以处理
文字固定或单行不固定还可以将文字转为图片
文字多行不固定,可以借助 svg 的 foreignObject 嵌入普通 div
方案对比屏幕适配方案非常多,选哪种方式实现 整层适配 或 精简适配,下面是对比
方案 | 缩放 | 定位 | 文字缩放 | 兼容 |
---|---|---|---|---|
padding-top 百分比 | 只能依宽 | ✓ | ✗ | ✓ |
viewport | ✓ | ✗ | ✓ | 支持情况复杂 |
object-fit | ✓ | ✓ | ✗ | 移动端 android 4.4.4+ |
svg preserveRatio | ✓ | ✓ | ✓ | 移动端 android 3.0+ |
(max/min)-(width/height) | ✓ | ✓ | 固定文字 | ✓ |
background-size | ✓ | ✓ | 文字转图片 | ✓ |
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/115816.html
摘要:并且除了常用的端,还要考虑微信端,或者是端。所以我们要有一套机制,在端上走的代码,在端或者微信端上走端对应的代码。对于一个从零开始的移动端项目,我总结了以上这些移动开发难点,希望之后的人能少踩点坑,站在我的肩膀上提高项目开发的效率和质量。 从零搭建移动H5开发项目实战 前端H5的前世今身 在Pc的时代,前端技术无疑统治了大多数用户的交互界面!而在移动为王的今天,NA开发在早期占领了大多...
摘要:并且除了常用的端,还要考虑微信端,或者是端。所以我们要有一套机制,在端上走的代码,在端或者微信端上走端对应的代码。对于一个从零开始的移动端项目,我总结了以上这些移动开发难点,希望之后的人能少踩点坑,站在我的肩膀上提高项目开发的效率和质量。 从零搭建移动H5开发项目实战 前端H5的前世今身 在Pc的时代,前端技术无疑统治了大多数用户的交互界面!而在移动为王的今天,NA开发在早期占领了大多...
阅读 2585·2021-11-22 15:35
阅读 3857·2021-11-04 16:14
阅读 2802·2021-10-20 13:47
阅读 2621·2021-10-13 09:49
阅读 2161·2019-08-30 14:09
阅读 2541·2019-08-26 13:49
阅读 976·2019-08-26 10:45
阅读 2866·2019-08-23 17:54