HTML5는 계층화된 화면 적응을 구현합니다.-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

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

小云云

Mar 19, 2018 am 10:09 AM

h5html5적응

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

화면 적응

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

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

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

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

선호 CSS

페이지가 로드된 후 js는 올바른 웹뷰 너비와 높이를 얻기 위해 최소 70ms의 지연이 필요한 경우가 많습니다
css가 먼저 실행되는 경우가 많습니다. cssom의 구문 분석은 dom의 구문 분석과 동일한 경우가 많습니다. 처음에 병렬로 빌드할 때
js는 실행 전에 dom과 cssom이 처리될 때까지 기다리는 반면, CSS는 dom
만 기다리면 됩니다. 가로 화면과 세로 화면 전환 시 다시 그리기 위해 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 动画多的时候，就得考虑动画流畅，页面性能了。

用可替换元素如 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/054/025/204518471bf211b12e6ad3f17a3b9c50-3.png?x-oss-process=image/resize,p_40" class="lazy" alt="HTML5는 계층화된 화면 적응을 구현합니다." > <object></object> <svg></svg> 等做容器，以及用背景图做元素的，

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

对容器内元素应用 css 动画会造成频繁重排和重绘，导致卡顿。
将和适配区尺寸相同的容器提升为合成层时所占内存过大，有多少层内存就翻多少倍。

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

精简适配

公式

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

<!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="/static/imghwm/default1.png"  data-src="http://ui.qzone.com/544x142"  class="lazy"  / alt="HTML5는 계층화된 화면 적응을 구현합니다." > <!-- 元素 -->
</body>
</html>

background 实现示例

background-size 值为 contain 时对应 contain 适配。
background-size 值为 cover 时对应 cover 适配。
background-size 值为 100% 100% 时对应 `fill 适配。
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>

preserveAspectRatio 的 meetOrSlice 为 meet 时对应 contain 适配。
preserveAspectRatio 的 meetOrSlice 为 slice 时对应 cover 适配。
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 애니메이션이 많은 경우에는 애니메이션의 부드러움과 페이지의 성능을 고려해야 합니다. 🎜🎜<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/054/025/204518471bf211b12e6ad3f17a3b9c50-3.png?x-oss-process=image/resize,p_40" class="lazy" alt="HTML5는 계층화된 화면 적응을 구현합니다." > <object></object> <svg></svg>와 같은 교체 가능한 요소를 컨테이너로 사용하고 배경 이미지를 요소로 사용 예 , 🎜🎜css 애니메이션을 적용할 때 성능 결함이 있습니다. 🎜🎜🎜🎜컨테이너의 요소에 CSS 애니메이션을 적용하면 재배치 및 다시 그리기가 자주 발생하여 지연이 발생합니다. 🎜🎜🎜🎜적응 영역과 동일한 크기의 컨테이너를 컴포지션 레이어로 승격하면 차지하는 메모리가 너무 많아 레이어 수만큼 메모리가 두 배가 됩니다. 🎜🎜🎜🎜이러한 구현 솔루션의 성능을 향상하려면 컨테이너 애니메이션에 중점을 두고 컨테이너 크기를 줄여야 합니다. 레이어에 있는 모든 요소의 최소 총 영역과 동일해야 합니다. 간소화된 적응 달성🎜🎜🎜간소한 적응🎜 🎜🎜🎜🎜 🎜공식🎜🎜🎜파생 과정은 H5를 참조하세요. 계층화된 화면 적응 공식 파생🎜

🎜rrreee🎜🎜 구현 예🎜
w/v, max-height는 h /g이며 적응을 포함하는 것에 해당합니다.
min-width를 w/v로 설정하고 min-height를 h/g로 설정하면 표지 적응에 해당합니다.
너비가 w/v로 설정되고 높이가 h/g로 설정되면 채우기 적응을 의미합니다.
개작 내용이 포함된 경우 이미지의 원본 크기가 max-width 및 max-height보다 작은 경우 Zoom: 10을 사용하여 이미지의 원본 크기를 확대하거나 직접 수정합니다.
개작을 다룰 때 이미지의 원본 크기가 최소 너비 및 최소 높이보다 큰 경우 Zoom: .1을 사용하여 이미지의 원본 크기를 줄이거나 직접 수정합니다.
왼쪽 상단의 백분율은 m*u 및 n*f에 해당하는 화면 너비 u 및 높이 f를 기준으로 하기 때문입니다.
변환의 백분율은 화면 너비 w1 및 높이 h1을 기준으로 하기 때문입니다. 적응 후 요소는 ( m*v + x)/w*w1 및 (n*f + y)/h*h1🎜

🎜rrreee🎜🎜배경 구현 예에 해당합니다. 🎜🎜🎜🎜🎜 background-size 값이 contain인 경우 포함 적응에 해당합니다. 🎜🎜🎜🎜ground-size 값이 cover인 경우 표지 적용에 해당합니다. 🎜🎜🎜🎜배경 크기 값이 100% 100%인 경우 `채우기 적응'에 해당합니다. 🎜🎜🎜🎜배경 위치 백분율은 o p🎜🎜🎜

🎜 rrreee🎜preserveAspectRatio의 meetOrSlice는 meet일 때 적응을 포함하는 것에 해당합니다. 🎜🎜🎜🎜preserveAspectRatio의 meetOrSlice는 slice인 경우 표지 각색에 해당합니다. 🎜🎜🎜🎜preserveAspectRatio는 값이 none일 때 채우기 적응에 해당합니다. 🎜
这里 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	✓	✓	文字转图片	✓

관련 기사

H5 코드 예제 : 실제 응용 프로그램 및 튜토리얼Apr 25, 2025 am 12:10 AM

H5는 다양한 새로운 기능과 기능을 제공하여 프론트 엔드 개발 기능을 크게 향상시킵니다. 1. 멀티미디어 지원 : 미디어를 포함하고 요소를 포함하여 플러그인이 필요하지 않습니다. 2. 캔버스 : 요소를 사용하여 2D 그래픽 및 애니메이션을 동적으로 렌더링합니다. 3. 로컬 스토리지 : LocalStorage 및 SessionStorage를 통해 지속적인 데이터 저장을 구현하여 사용자 경험을 향상시킵니다.

H5와 HTML5 사이의 연결 : 유사성과 차이Apr 24, 2025 am 12:01 AM

H5 및 HTML5는 다른 개념입니다. HTML5는 새로운 요소 및 API를 포함하는 HTML의 버전입니다. H5는 HTML5를 기반으로 한 모바일 애플리케이션 개발 프레임 워크입니다. HTML5는 브라우저를 통해 코드를 구문 분석하고 렌더링하는 반면 H5 응용 프로그램은 컨테이너를 실행하고 JavaScript를 통해 기본 코드와 상호 작용해야합니다.

H5 코드의 빌딩 블록 : 주요 요소 및 그 목적Apr 23, 2025 am 12:09 AM

HTML5의 주요 요소에는 최신 웹 페이지를 작성하는 데 사용되는 ,,,,, 등이 포함됩니다. 1. 헤드 컨텐츠 정의, 2. 링크를 탐색하는 데 사용됩니다. 3. 독립 기사의 내용을 나타내고, 4. 페이지 내용을 구성하고, 5. 사이드 바 컨텐츠 표시, 6. 바닥 글을 정의하면, 이러한 요소는 웹 페이지의 구조와 기능을 향상시킵니다.

HTML5 및 H5 : 일반적인 사용법 이해Apr 22, 2025 am 12:01 AM

HTML5와 H5 사이에는 차이가 없으며, 이는 HTML5의 약어입니다. 1.HTML5는 HTML의 다섯 번째 버전으로 웹 페이지의 멀티미디어 및 대화식 기능을 향상시킵니다. 2.H5는 종종 HTML5 기반 모바일 웹 페이지 또는 응용 프로그램을 참조하는 데 사용되며 다양한 모바일 장치에 적합합니다.

HTML5 : 현대 웹의 빌딩 블록 (H5)Apr 21, 2025 am 12:05 AM

HTML5는 W3C에 의해 표준화 된 하이퍼 텍스트 마크 업 언어의 최신 버전입니다. HTML5는 새로운 시맨틱 태그, 멀티미디어 지원 및 양식 향상을 도입하여 웹 구조, 사용자 경험 및 SEO 효과를 개선합니다. HTML5는 웹 페이지 구조를 더 명확하게하고 SEO 효과를 더 좋게하기 위해, 등 등과 같은 새로운 시맨틱 태그를 소개합니다. HTML5는 멀티미디어 요소를 지원하며 타사 플러그인이 필요하지 않으므로 사용자 경험을 향상시키고 속도를로드합니다. HTML5는 양식 함수를 향상시키고 사용자 경험을 향상시키고 양식 검증 효율성을 향상시키는 새로운 입력 유형을 도입합니다.

H5 코드 : 깨끗하고 효율적인 html5 작성Apr 20, 2025 am 12:06 AM

깨끗하고 효율적인 HTML5 코드를 작성하는 방법은 무엇입니까? 답은 태그, 구조화 된 코드, 성능 최적화 및 일반적인 실수를 피함으로써 일반적인 실수를 피하는 것입니다. 1. 코드 가독성 및 SEO 효과를 향상시키기 위해 시맨틱 태그 등을 사용하십시오. 2. 적절한 계약과 의견을 사용하여 코드를 구성하고 읽을 수 있도록하십시오. 3. CDN 및 압축 코드를 사용하여 불필요한 태그를 줄임으로써 성능을 최적화합니다. 4. 태그가 닫히지 않은 것과 같은 일반적인 실수를 피하고 코드의 유효성을 확인하십시오.

H5 : 웹에서 사용자 경험을 향상시키는 방법Apr 19, 2025 am 12:08 AM

H5는 멀티미디어 지원, 오프라인 스토리지 및 성능 최적화로 웹 사용자 경험을 향상시킵니다. 1) 멀티미디어 지원 : H5 및 요소는 개발을 단순화하고 사용자 경험을 향상시킵니다. 2) 오프라인 스토리지 : WebStorage 및 IndexedDB는 오프라인으로 사용하여 경험을 향상시킵니다. 3) 성능 최적화 : 웹 워즈 및 요소는 성능을 최적화하여 대역폭 소비를 줄입니다.

H5 코드 해체 : 태그, 요소 및 속성Apr 18, 2025 am 12:06 AM

HTML5 코드는 태그, 요소 및 속성으로 구성됩니다. 1. 태그는 컨텐츠 유형을 정의하고 다음과 같은 각도 브래킷으로 둘러싸여 있습니다. 2. 요소는 컨텐츠와 같은 시작 태그, 내용 및 엔드 태그로 구성됩니다. 3. 속성 시작 태그에서 키 값 쌍을 정의하고 기능을 향상시킵니다. 웹 구조를 구축하기위한 기본 단위입니다.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.