S5 allows layered screens to adapt-H5 Tutorial-php.cn

This time I will bring you S5 to adapt to layered screens. What are the precautions for S5 to adapt to layered screens? The following is a practical case, let’s take a look.

The design is great, this time it is really "according to the design draft", because now, any machine is a standard machine according to the design draft! Developer classmates, now you can just read the design draft annotations directly!

Screen adaptation

Screen adaptation should refer to the adaptation relationship between the content adaptation area and the screen area.

Single-screen adaptation includes contain, cover or fill, and multi-screen adaptation is common with yikuan.

contain and cover also need positioning to handle white space and excess content.

Different content in the same H5 often uses different adaptation methods, that is, layering.

##Preferred CSS

Whole layer adaptation

To ensure that the elements of each layer are scaled synchronously and without distortion, the adaptation area of each layer should be equal to the size of the design draft.

The direct implementation is to construct a container with the same size as the adaptation area and adapt the entire layer.

There can be several elements with the same adaptation method in the container.

Take

svg

implementation as an example: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!doctype html> <html> <body> <style> .layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style>  <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>  <svg class="layer" viewBox="0 0 1080 1920" preserveAspectRatio="xMidYMid meet">  <rect x="0" y="233" width="1080" height="1407" fill="#1565C0"/>  </svg>  <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></pre><div class="contentsignin">Copy after login</div></div>Actual effect:

The entire layer adaptation is simple to implement, Directly reading the design draft values during development can meet the needs of most static pages.

But when there are many h5 animations, you have to consider the smoothness of the animation and the performance of the page.

Use replaceable elements such as

<object> <svg> etc. as containers, and use background images to make Elements, There are performance defects when applying css animation:

Streamlined adaptation

Formula

For the derivation process, see H5 Layering Derivation of screen adaptation formula

设计稿
  宽 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)

Copy after login

Implementation example

When max-width is w/v and max-height is h/g, it corresponds to contain adaptation. When min-width is set to w/v,
min-height
is set to h/g, it corresponds to cover adaptation. When width is set to w/v and height is h/g, it means fill adaptation. contain When adapting, if the original size of the image is smaller than max-width and max-height, use zoom: 10 to enlarge or directly modify the original size of the image.
When covering adaptation, if the original size of the image is larger than min-width and min-height, use zoom: .1 to reduce or directly modify the original size of the image.
Because the percentage in top left is relative to the screen width u and height f, corresponding to m*u and n*f
Because the percentage in transform is relative to the width w1 and height h1 of the element after adaptation, it corresponds to (m*v + x)/w*w1 and (n*f + y)/h*h1

<!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://ui.qzone.com/544x142"/> <!-- 元素 -->
</body>
</html>

Copy after login

background Implementation example

<a href="http://www.php.cn/code/872.html" target="_blank">background-size</a> 值为 contain 时对应 contain 适配。

background-size 值为 cover 时对应 cover 适配。

background-size 值为 100% 100% 时对应 `fill 适配。

<a href="http://www.php.cn/wiki/896.html" target="_blank">background-position</a> 百分比和 o p 意义相同

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!doctype html>
<html>
<body>
<style>
p {
  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*/
}
</style>
<p></p> 
</body>
</html>
Copy after login

<svg> 实现示例

preserveAspectRatio 的 meetOrSlice 为 meet 时对应 contain 适配。

preserveAspectRatio 的 meetOrSlice 为 slice 时对应 cover 适配。

preserveAspectRatio 值为 none 时对应 fill 适配。

这里 preserveAspectRatio 的 meetOrSlice 相对的是容器，不是适配区这里用 transform 来定位，而 preserveAspectRatio 的 meetOrSlice 固定为 xMinYMin。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!doctype html>
<html>
<body>
<style>
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 */
}
</style>
<svg viewBox="0 0 544 142" preserveAspectRatio="xMinYMin meet"> 
  <image width="544" height="142" xlink:href="http://ui.qzone.com/544x142"/> 
</svg>
</body>
</html>
Copy after login

辅助工具

手动计算百分比及写 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 ✓ ✓ 文字转图片 ✓

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

max-width和min-width的使用技巧

Mac系统里MySQL重置Root密码

The above is the detailed content of S5 allows layered screens to adapt. For more information, please follow other related articles on the PHP Chinese website!