S5에서는 계층화된 화면을 적응할 수 있습니다.-H5 튜토리얼-php.cn

이번에는 레이어드 스크린 적응을 위한 S5를 들고 오겠습니다. S5가 레이어드 스크린 적응을 위한 주의사항은 무엇인가요? 다음은 실제 사례를 살펴보겠습니다.

디자인이 훌륭합니다. 이번에는 정말 "설계 초안에 따른" 것입니다. 이제 모든 기계는 설계 초안을 기반으로 하는 표준 기계이기 때문입니다! 개발자 동창 여러분, 이제 디자인 초안 주석을 직접 읽어보세요!

화면 적응

화면 적응은 콘텐츠 적응 영역과 화면 영역 간의 적응 관계를 의미해야 합니다.

단일 화면 적응에는 포함, 덮기 또는 채우기가 있으며 다중 화면 적응은 yikuan에서 일반적입니다.

contain과 Cover도 공백과 초과 콘텐츠를 처리하기 위한 위치 지정이 필요합니다.

동일한 H5의 다양한 콘텐츠는 종종 다양한 적응 방법, 즉 레이어링을 사용합니다.

선호 CSS

페이지가 로드된 후 js는 올바른 웹뷰 너비와 높이를 얻기 위해 최소 70ms의 지연이 필요한 경우가 많습니다
css가 먼저 실행되는 경우가 많습니다. cssom의 구문 분석은 dom의 구문 분석과 동일한 경우가 많습니다. 처음에 병렬로 빌드할 때
js는 실행 전에 dom과 cssom이 처리될 때까지 기다리는 반면, CSS는 dom
만 기다리면 됩니다. 가로 화면과 세로 화면 전환 시 다시 그리기 위해 2개의 프로세스를 전환해야 하는 Node.js에서는 CSS는 전환이 필요 없습니다

화면 적응 등의 성능 문제는 CSS로 구현할 수 있다면 CSS로 구현해야 합니다.

전체 레이어 적응

각 레이어의 요소가 왜곡 없이 동기적으로 크기 조정되도록 하려면 각 레이어의 적응 영역이 디자인 초안의 크기와 같아야 합니다.

직접 구현은 적응 영역과 동일한 크기로 컨테이너를 구성하고 전체 레이어를 적응시키는 것입니다.

컨테이너에는 동일한 개조 방식을 가진 여러 요소가 있을 수 있습니다.

svg 구현을 예로 들어보세요: 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>

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

로그인 후 복사

실제 효과:

전체 레이어 적응은 구현이 간단합니다. 개발 중에 디자인 초안 값을 직접 읽을 수 있어 대부분의 정적 페이지의 요구 사항을 충족할 수 있습니다.
하지만 h5 애니메이션이 많은 경우에는 애니메이션의 부드러움과 페이지의 성능을 고려해야 합니다.
<img> <object> <svg>와 같은 교체 가능한 요소를 컨테이너로 사용하고 배경 이미지를 요소로 사용 예 , css 애니메이션을 적용할 때 성능 결함이 있습니다.

컨테이너의 요소에 CSS 애니메이션을 적용하면 재배치 및 다시 그리기가 자주 발생하여 지연이 발생합니다.

적응 영역과 동일한 크기의 컨테이너를 컴포지션 레이어로 승격하면 차지하는 메모리가 너무 많아 레이어 수만큼 메모리가 두 배가 됩니다.

이러한 구현 솔루션의 성능을 향상하려면 컨테이너 애니메이션에 중점을 두고 컨테이너 크기를 줄여야 합니다. 레이어에 있는 모든 요소의 최소 총 영역과 동일해야 합니다. 간소화된 적응 달성

간소한 적응

Formula
파생 과정은 H5 계층 화면 적응 공식 파생

<!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>

로그인 후 복사

<img> 구현 예
를 참조하세요. v, max-height는 h/g입니다. 적응을 포함하는 경우입니다.

min-width가 w/v이고 min-height가 h/g일 때 표지 적응에 해당합니다. 너비가 w/v로 설정되고 높이가 h/g로 설정되면 채우기 적응을 의미합니다. 적용을 포함합니다. 이미지의 원본 크기가 최대 너비 및 최대 높이보다 작은 경우 Zoom: 10을 사용하여 이미지의 원본 크기를 확대하거나 직접 수정합니다.

개작을 다룰 때 이미지의 원본 크기가 최소 너비 및 최소 높이보다 큰 경우 Zoom: .1을 사용하여 이미지의 원본 크기를 줄이거나 직접 수정합니다. 🎜왼쪽 상단의 백분율은 m*u 및 n*f에 해당하는 화면 너비 u 및 높이 f를 기준으로 하기 때문입니다. 🎜변환의 백분율은 적응 후 요소의 너비 w1 및 높이 h1을 기준으로 하기 때문에 (m*v + x) /w*w1 및 (n*f + y)/h*h1🎜

<!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>

로그인 후 복사

🎜🎜🎜Background🎜 구현 예🎜🎜

<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 意义相同

<!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>

로그인 후 복사

<svg> 实现示例

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

<!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>

로그인 후 복사

辅助工具

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