溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

html5實(shí)現(xiàn)分層屏幕適配的方法

發(fā)布時(shí)間：2020-10-26 09:30:04 來源：億速云 閱讀：184 作者：小新 欄目：web開發(fā)

小編給大家分享一下html5實(shí)現(xiàn)分層屏幕適配的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

屏幕適配

屏幕適配應(yīng)當(dāng)指內(nèi)容 適配區(qū) 和 屏幕區(qū) 間的適配關(guān)系。

單屏適配有 contain、cover 或 fill，多屏常見是 依寬 。

contain 和 cover 還需要 定位 來處理留白和超出的內(nèi)容。

而同一個(gè) H5 里不同內(nèi)容往往用不同適配方式，即 分層。

html5實(shí)現(xiàn)分層屏幕適配的方法

html5實(shí)現(xiàn)分層屏幕適配的方法

優(yōu)選CSS

  1. 頁面加載后 js 往往需要延時(shí)至少 70ms 才能獲取正確的 webview 寬高

  2. css 往往最先執(zhí)行，且 cssom 的解析往往和 dom 在最開始并行構(gòu)建

  3. js 會(huì)等待 dom 和 cssom 處理完后才能執(zhí)行，而 css 只需等待 dom

  4. 相比 js 在切換橫豎屏?xí)r要切換 2 次進(jìn)程來重繪，css 無需切換

對(duì)于屏幕適配這類表現(xiàn)問題，能用 css 實(shí)現(xiàn)就應(yīng)該用 css 實(shí)現(xiàn)。

整層適配

為確保各層元素同步縮放，不走樣，每層的 適配區(qū) 應(yīng)當(dāng)?shù)扔谠O(shè)計(jì)稿大小。

直接的實(shí)現(xiàn)就是構(gòu)造和 適配區(qū) 一樣尺寸的 容器， 整層適配。

容器 內(nèi)可以有若干個(gè)相同適配方式的 元素。

以 svg 實(shí)現(xiàn)為例：

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

實(shí)際效果：

html5實(shí)現(xiàn)分層屏幕適配的方法

整層適配 實(shí)現(xiàn)簡單，開發(fā)時(shí)直接讀取設(shè)計(jì)稿值，可以滿足大部分靜態(tài)頁面需求。

但在 h6 動(dòng)畫多的時(shí)候，就得考慮動(dòng)畫流暢，頁面性能了。

用可替換元素如 <img> <object> <svg> 等做 容器，以及用背景圖做 元素 的，

在應(yīng)用 css 動(dòng)畫時(shí)有性能缺陷：

  1. 對(duì) 容器 內(nèi) 元素 應(yīng)用 css 動(dòng)畫會(huì)造成頻繁重排和重繪，導(dǎo)致卡頓。

  2. 將和 適配區(qū) 尺寸相同的 容器 提升為合成層時(shí)所占內(nèi)存過大，有多少層內(nèi)存就翻多少倍。

為這些實(shí)現(xiàn)方案提升性能就要針對(duì) 容器 動(dòng)畫，并減小 容器 的尺寸，最好是和一層里所有 元素 的最小總面積相等，做到 精簡適配

精簡適配

html5實(shí)現(xiàn)分層屏幕適配的方法

公式

推導(dǎo)過程見 H5 分層屏幕適配公式推導(dǎo)

設(shè)計(jì)稿
  寬 v
  高 g
  
適配前元素
  橫坐標(biāo) x
  縱坐標(biāo) y
  寬 w
  高 h

適配后容器
  橫坐標(biāo) x3 = x*u/v
  縱坐標(biāo) y3 = y*f/g

適配后元素
  橫坐標(biāo) x4 = m*u + (x - m*v)/w*w1 = m*v/w*w3 + (x - m*v)/w*w1
  縱坐標(biāo) y4 = n*f + (y - n*g)/h*h2 = n*g/h*h4 + (y - n*g)/h*h2
  寬 w3 = (w/v)*u
  高 h4 = (h/g)*f
  當(dāng) contain 方式適配時(shí)
    縮放值 s = Math.min(f/g, u/v)
    橫向左留白占總留白 o = (m*v - x)/w
    縱向上留白占總留白 p =  (n*g - y)/h
  當(dāng) cover 方式適配時(shí)
    縮放值 s = Math.max(f/g, u/v)
    橫向左超出占總超出 o = (x - m*v)/w
    縱向上超出占總超出 p =  (y - n*g)/h

適配區(qū)
  垂直居頂時(shí) m = 0
  垂直居中時(shí) m = .5
  垂直居底時(shí) m = 1 
  水平居左時(shí) n = 0
  水平居中時(shí) n = .5
  水平居右時(shí) n = 1 

相比整層適配內(nèi)存優(yōu)化 (w3*h4)/(v1*g1) >= w*h/(v*g)

<img> 實(shí)現(xiàn)示例
當(dāng)設(shè) max-width 為 w/v，max-height 為 h/g 時(shí)對(duì)應(yīng) contain 適配。
當(dāng)設(shè) min-width 為 w/v，min-height 為 h/g 時(shí)對(duì)應(yīng) cover 適配。
當(dāng)設(shè) width 為 w/v，height 為 h/g 時(shí)表示 fill 適配。
contain 適配時(shí)，如果圖片原始尺寸小于 max-width 和 max-height 時(shí)，用 zoom: 10 放大或者直接修改圖片原始尺寸。
cover 適配時(shí)，如果圖片原始尺寸大于 min-width 和 min-height 時(shí)，用 zoom: .1 縮小或者直接修改圖片原始尺寸。
因 top left 中百分比是相對(duì)屏幕寬 u 和高 f 的，對(duì)應(yīng) m*u 和 n*f
因 transform 中百分比是相對(duì)適配后元素寬 w1 和高 h2 的，對(duì)應(yīng) (m*v + x)/w*w1 和 (n*f + y)/h*h2

<!doctype html>
<html>
<body>
<style>
img {
  /* min-width 和 min-height 構(gòu)成了虛擬的容器 */
  min-width: 50.37037037037037%; /* w3 = (w/v)*u 其中 w = 544，v = 1080 */
  min-height: 7.395833333333333%; /* h4 = (h/g)*f 其中 h = 142，g = 1920 */
  zoom: .1;
  /* x4 = m*u + (x - m*v)/w*w1 */
  /* y4 = n*f + (y - n*g)/h*h2 */
  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*h2 其中 y = 1498，n = .5，g = 1920，h = 142 */
}
</style>
<img src="http://ui.qzone.com/544x142"/> <!-- 元素 -->
</body>
</html>

background 實(shí)現(xiàn)示例

  1. background-size 值為 contain 時(shí)對(duì)應(yīng) contain 適配。

  2. background-size 值為 cover 時(shí)對(duì)應(yīng) cover 適配。

  3. background-size 值為 100% 100% 時(shí)對(duì)應(yīng) `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%; /* h4 = 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> 實(shí)現(xiàn)示例

  1. preserveAspectRatio 的 meetOrSlice 為 meet 時(shí)對(duì)應(yīng) contain 適配。

  2. preserveAspectRatio 的 meetOrSlice 為 slice 時(shí)對(duì)應(yīng) cover 適配。

  3. preserveAspectRatio 值為 none 時(shí)對(duì)應(yīng) fill 適配。

  4. 這里 preserveAspectRatio 的 meetOrSlice 相對(duì)的是容器，不是 適配區(qū) 這里用 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*h4 + (y - n*g)/h*h2 */
  top: 0;
  left: 0;
  transform:
    translateX(99.26470588235294%) /* m*v/w*w3 其中 m = .5，v = 1080，w = 544 */
    translateY(676.056338028169%); /* n*g/h*h4 其中 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*h2 其中 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>

輔助工具

手動(dòng)計(jì)算百分比及寫 css 很麻煩，可以借助 sass 等工具來輔助簡化。
設(shè)計(jì)稿寬 v 高 g 一般是頁面級(jí)常量。
只需讀取設(shè)計(jì)稿里每個(gè) 元素 的橫坐標(biāo) x 、縱坐標(biāo) y 、寬 w 和 高 h，然后工具生成 css 即可。
這下媽媽再也不用擔(dān)心我還原問題、屏幕適配問題了。

文字處理

文字固定或單行不固定，svg 的 text 標(biāo)簽可以處理

文字固定或單行不固定還可以將文字轉(zhuǎn)為圖片

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

方案對(duì)比

屏幕適配方案非常多，選哪種方式實(shí)現(xiàn) 整層適配 或 精簡適配，下面是對(duì)比

方案縮放定位文字縮放兼容
padding-top 百分比只能依寬???
viewport???支持情況復(fù)雜
object-fit???移動(dòng)端 android 4.4.4+
svg preserveRatio???移動(dòng)端 android 3.0+
(max/min)-(width/height)??固定文字?
background-size??文字轉(zhuǎn)圖片?

以上是html5實(shí)現(xiàn)分層屏幕適配的方法的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手