찾다

집 >웹 프론트엔드 >H5 튜토리얼 >HTML5는 계층화된 화면 적응을 구현합니다.

HTML5는 계층화된 화면 적응을 구현합니다.

小云云
小云云원래의
2018-03-19 10:09:473041검색

이 글은 주로 html5 레이어드 화면 적응 방법에 대한 관련 정보를 소개하는 글입니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려드리겠습니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.

화면 적응

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

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

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

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

선호 CSS

  1. 페이지가 로드된 후 js는 올바른 웹뷰 너비와 높이를 얻기 위해 최소 70ms의 지연이 필요한 경우가 많습니다

  2. css가 먼저 실행되는 경우가 많습니다. cssom의 구문 분석은 dom의 구문 분석과 동일한 경우가 많습니다. 처음에 병렬로 빌드할 때

  3. js는 실행 전에 dom과 cssom이 처리될 때까지 기다리는 반면, CSS는 dom

  4. 만 기다리면 됩니다. 가로 화면과 세로 화면 전환 시 다시 그리기 위해 2개의 프로세스를 전환해야 하는 Node.js에서는 CSS가 Switching을 필요로 하지 않습니다

화면 적응 등의 성능 문제는 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 动画多的时候，就得考虑动画流畅，页面性能了。

用可替换元素如 a1f02c36ba31691bcfe87b2722de723b 273238ce9338fbb04bee6997e5552b95 486d7a50595533609bc98d44595dc670 等做 容器，以及用背景图做 元素 的，

在应用 css 动画时有性能缺陷：

  1. 对 容器 内 元素 应用 css 动画会造成频繁重排和重绘，导致卡顿。

  2. 将和 适配区 尺寸相同的 容器 提升为合成层时所占内存过大，有多少层内存就翻多少倍。

为这些实现方案提升性能就要针对 容器 动画，并减小 容器 的尺寸，最好是和一层里所有 元素 的最小总面积相等，做到 精简适配

精简适配

公式

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

a1f02c36ba31691bcfe87b2722de723b 实现示例
当设 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


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

background 实现示例

  1. background-size 值为 contain 时对应 contain 适配。

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

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

  4. background-position 百分比和 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>

486d7a50595533609bc98d44595dc670 实现示例

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

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

  3. preserveAspectRatio 值为 none


    <!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>
    🎜실제 효과: 🎜🎜🎜🎜전체 레이어 적응은 구현이 간단하고 디자인 초안 값은 개발 중에 직접 읽을 수 있어 충족할 수 있습니다. 대부분의 정적 페이지의 요구 사항. 🎜🎜하지만 h5 애니메이션이 많은 경우에는 애니메이션의 부드러움과 페이지의 성능을 고려해야 합니다. 🎜🎜a1f02c36ba31691bcfe87b2722de723b <object> <code><svg>와 같은 교체 가능한 요소를 컨테이너로 사용하고 배경 이미지를 요소로 사용 예 , 🎜🎜css 애니메이션을 적용할 때 성능 결함이 있습니다. 🎜🎜🎜🎜컨테이너의 요소에 CSS 애니메이션을 적용하면 재배치 및 다시 그리기가 자주 발생하여 지연이 발생합니다. 🎜🎜🎜🎜적응 영역과 동일한 크기의 컨테이너를 컴포지션 레이어로 승격하면 차지하는 메모리가 너무 많아 레이어 수만큼 메모리가 두 배가 됩니다. 🎜🎜🎜🎜이러한 구현 솔루션의 성능을 향상하려면 컨테이너 애니메이션에 중점을 두고 컨테이너 크기를 줄여야 합니다. 레이어에 있는 모든 요소의 최소 총 영역과 동일해야 합니다. 간소화된 적응 달성🎜🎜🎜간소한 적응🎜 🎜🎜<img alt="" src="https://img.php.cn/upload/article/000/054/025/204518471bf211b12e6ad3f17a3b9c50-3.png">🎜🎜 🎜공식🎜🎜🎜파생 과정은 H5를 참조하세요. 계층화된 화면 적응 공식 파생🎜<p class="jb51code"><br>🎜rrreee🎜🎜a1f02c36ba31691bcfe87b2722de723b 구현 예🎜<br> w/v, max-height는 h /g이며 적응을 포함하는 것에 해당합니다. <br>min-width를 w/v로 설정하고 min-height를 h/g로 설정하면 표지 적응에 해당합니다. <br>너비가 w/v로 설정되고 높이가 h/g로 설정되면 채우기 적응을 의미합니다. <br>개작 내용이 포함된 경우 이미지의 원본 크기가 max-width 및 max-height보다 작은 경우 Zoom: 10을 사용하여 이미지의 원본 크기를 확대하거나 직접 수정합니다. <br>개작을 다룰 때 이미지의 원본 크기가 최소 너비 및 최소 높이보다 큰 경우 Zoom: .1을 사용하여 이미지의 원본 크기를 줄이거나 직접 수정합니다. <br>왼쪽 상단의 백분율은 m*u 및 n*f에 해당하는 화면 너비 u 및 높이 f를 기준으로 하기 때문입니다.<br>변환의 백분율은 화면 너비 w1 및 높이 h1을 기준으로 하기 때문입니다. 적응 후 요소는 ( m*v + x)/w*w1 및 (n*f + y)/h*h1🎜</p> <p class="jb51code"><br>🎜rrreee🎜🎜배경 구현 예에 해당합니다. 🎜🎜🎜🎜🎜<code> background-size 값이 contain인 경우 포함 적응에 해당합니다. 🎜🎜🎜🎜ground-size 값이 cover인 경우 표지 적용에 해당합니다. 🎜🎜🎜🎜배경 크기 값이 100% 100%인 경우 `채우기 적응'에 해당합니다. 🎜🎜🎜🎜배경 위치 백분율은 o p🎜🎜🎜


    🎜 rrreee🎜486d7a50595533609bc98d44595dc670 구현 예🎜🎜🎜🎜preserveAspectRatio의 meetOrSlice는 meet일 때 적응을 포함하는 것에 해당합니다. 🎜🎜🎜🎜preserveAspectRatio의 meetOrSlice는 slice인 경우 표지 각색에 해당합니다. 🎜🎜🎜🎜preserveAspectRatio는 값이 none일 때 채우기 적응에 해당합니다. 🎜

  4. 这里 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 ✓ ✓ 文字转图片 ✓

相关推荐：

html5开发中viewport进行屏幕适配

JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案

HTML5实现移动页面自适应手机屏幕的方法

위 내용은 HTML5는 계층화된 화면 적응을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML5 WebGL로 구현한 3D 컴퓨터실 예시다음 기사：HTML5 WebGL로 구현한 3D 컴퓨터실 예시

관련 기사

더보기