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

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

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括孟州網(wǎng)站建設(shè)、孟州網(wǎng)站制作、孟州網(wǎng)頁(yè)制作以及孟州網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，孟州網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到孟州省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

屏幕適配

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

單屏適配有 contain、cover 或 fill，多屏常見(jiàn)是依寬。

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

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

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

優(yōu)選CSS

頁(yè)面加載后 js 往往需要延時(shí)至少 70ms 才能獲取正確的 webview 寬高
css 往往最先執(zhí)行，且 cssom 的解析往往和 dom 在最開(kāi)始并行構(gòu)建
js 會(huì)等待 dom 和 cssom 處理完后才能執(zhí)行，而 css 只需等待 dom
相比 js 在切換橫豎屏?xí)r要切換 2 次進(jìn)程來(lái)重繪，css 無(wú)需切換

對(duì)于屏幕適配這類表現(xiàn)問(wè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)簡(jiǎn)單，開(kāi)發(fā)時(shí)直接讀取設(shè)計(jì)稿值，可以滿足大部分靜態(tài)頁(yè)面需求。

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

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

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

對(duì) 容器內(nèi) 元素應(yīng)用 css 動(dòng)畫(huà)會(huì)造成頻繁重排和重繪，導(dǎo)致卡頓。
將和適配區(qū) 尺寸相同的容器提升為合成層時(shí)所占內(nèi)存過(guò)大，有多少層內(nèi)存就翻多少倍。

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

精簡(jiǎn)適配

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

公式

推導(dǎo)過(guò)程見(jiàn) 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)示例

background-size 值為 contain 時(shí)對(duì)應(yīng) contain 適配。
background-size 值為 cover 時(shí)對(duì)應(yīng) cover 適配。
background-size 值為 100% 100% 時(shí)對(duì)應(yīng) `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%; /* 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>

preserveAspectRatio 的 meetOrSlice 為 meet 時(shí)對(duì)應(yīng) contain 適配。
preserveAspectRatio 的 meetOrSlice 為 slice 時(shí)對(duì)應(yīng) cover 適配。
preserveAspectRatio 值為 none 時(shí)對(duì)應(yīng) fill 適配。
這里 preserveAspectRatio 的 meetOrSlice 相對(duì)的是容器，不是適配區(qū) 這里用 transform 來(lái)定位，而 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ì)算百分比及寫(xiě) css 很麻煩，可以借助 sass 等工具來(lái)輔助簡(jiǎn)化。
設(shè)計(jì)稿寬 v 高 g 一般是頁(yè)面級(jí)常量。
只需讀取設(shè)計(jì)稿里每個(gè) 元素的橫坐標(biāo) x 、縱坐標(biāo) y 、寬 w 和高 h，然后工具生成 css 即可。
這下媽媽再也不用擔(dān)心我還原問(wèn)題、屏幕適配問(wèn)題了。

文字處理

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

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

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

方案對(duì)比

屏幕適配方案非常多，選哪種方式實(shí)現(xiàn) 整層適配或精簡(jiǎ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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文題目：html5實(shí)現(xiàn)分層屏幕適配的方法
分享URL：http://jinyejixie.com/article22/ghopjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)、營(yíng)銷型網(wǎng)站建設(shè)、域名注冊(cè)、軟件開(kāi)發(fā)、外貿(mào)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

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