S5让分层屏幕适配--百分百源码网

S5让分层屏幕适配-

发布时间：08/01 来源：未知浏览：关键词：

这次给大家带来S5让分层屏幕适配，S5让分层屏幕适配的注意事项是什么，下面就是实战案例，一起来看一下。这次给大家带来S5让分层屏幕适配，S5让分层屏幕适配的注意事项是什么，下面就是实战案例，一起来看一下。

设计大大，这次真的是 "按设计稿来" 了，由于此刻，任何机子都是设计稿规范机！开发同窗，这下你就直接读设计稿标注就好了啦！

屏幕适配

屏幕适配应该指内容适配区和屏幕区间的适配关系。

单屏适配有 contain、cover 或 fill，多屏常见是依宽。

contain 和 cover 还需要定位来处置留白和超出的内容。

而统一个 H5 里不一样内容往往用不一样适配方式，即分层。

优选CSS

页面加载后 js 往往需要延时至少 70ms 才干猎取准确的 webview 宽高
css 往往最先施行，且 cssom 的解析往往和 dom 在最开端并行构建
js 会期待 dom 和 cssom 处置完后才干施行，而 css 只需期待 dom
比拟 js 在切换横竖屏时要切换 2 次进程来重绘，css 无需切换

关于屏幕适配这类体现题目，能用 css 实现就应当用 css 实现。

整层适配

为确保各层元素同步缩放，不走样，每层的适配区应该等于设计稿大小。

直接的实现就是结构和适配区同样尺寸的容器，整层适配。

容器内可以有若干个雷同适配方式的元素。

以 svg 实现为例：

现实结果：

公式

推导历程见 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)

实现示例
当设 max-width 为 w/v，max-height 为 h/g 时对应 contain 适配。
当设 min-width 为 w/v，min-height 为 h/g 时对应 cover 适配。
当设 width 为 w/v，height 为 h/g 时表示 fill 适配。
contain 适配时，要是图片原始尺寸小于 max-width 和 max-height 时，用 zoom: 10 放大或者直接修改图片原始尺寸。
cover 适配时，要是图片原始尺寸大于 min-width 和 min-height 时，用 zoom: .1 缩小或者直接修改图片原始尺寸。
因 top left 中百分比是相对屏幕宽 u 和高 f 的，对应 m*u 和 n*f
因 transform 中百分比是相对适配后元素宽 w1 和高 h1 的，对应 (m*v + x)/w*w1 和 (n*f + y)/h*h1

background 实现示例

background-size 值为 contain 时对应 contain 适配。
background-size 值为 cover 时对应 cover 适配。
background-size 值为 100% 100% 时对应 `fill 适配。
background-position 百分比和 o p 意义雷同

preserveAspectRatio 的 meetOrSlice 为 meet 时对应 contain 适配。
preserveAspectRatio 的 meetOrSlice 为 slice 时对应 cover 适配。
preserveAspectRatio 值为 none 时对应 fill 适配。
这里 preserveAspectRatio 的 meetOrSlice 相对的是容器，不是适配区这里用 transform 来定位，而 preserveAspectRatio 的 meetOrSlice 牢固为 xMinYMin。

辅助工具

手动盘算百分等到写 css 很费事，可以借助 sass 等工具来辅助简化。
设计稿宽 v 高 g 个别是页面级常量。
只需读取设计稿里每个元素的横坐标 x 、纵坐标 y 、宽 w 和高 h，然后工具生成 css 即可。
这下妈妈再也不消担忧我复原题目、屏幕适配题目了。

文字处置

文字牢固或单行不牢固，svg 的 text 标签可以处置

文字牢固或单行不牢固还可以将文字转为图片

文字多行不牢固，可以借助 svg 的 foreignObject 嵌入普通 p

方案对照

屏幕适配方案非常多，选哪种方式实现整层适配或精简适配，下面是对照

方案	缩放	定位	文字缩放	兼容
padding-top 百分比	只能依宽	?	?	?
viewport	?	?	?	支撑状况复杂
object-fit	?	?	?	挪移端 android 4.4.4+
svg preserveRatio	?	?	?	挪移端 android 3.0+
(max/min)-(width/height)	?	?	牢固文字	?
background-size	?	?	文字转图片	?