您好,登錄后才能下訂單哦!
本篇文章為大家展示了怎么在html5中實(shí)現(xiàn)分層屏幕適配,內(nèi)容簡明扼要并且容易理解,絕對(duì)能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
屏幕適配
屏幕適配應(yīng)當(dāng)指內(nèi)容 適配區(qū) 和 屏幕區(qū) 間的適配關(guān)系。
單屏適配有 contain、cover 或 fill,多屏常見是 依寬 。
contain 和 cover 還需要 定位 來處理留白和超出的內(nèi)容。
而同一個(gè) H5 里不同內(nèi)容往往用不同適配方式,即 分層。
優(yōu)選CSS
頁面加載后 js 往往需要延時(shí)至少 70ms 才能獲取正確的 webview 寬高
css 往往最先執(zhí)行,且 cssom 的解析往往和 dom 在最開始并行構(gòu)建
js 會(huì)等待 dom 和 cssom 處理完后才能執(zhí)行,而 css 只需等待 dom
相比 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í)際效果:
整層適配 實(shí)現(xiàn)簡單,開發(fā)時(shí)直接讀取設(shè)計(jì)稿值,可以滿足大部分靜態(tài)頁面需求。
但在 h6 動(dòng)畫多的時(shí)候,就得考慮動(dòng)畫流暢,頁面性能了。
用可替換元素如 <img>
<object>
<svg>
等做 容器,以及用背景圖做 元素 的,
在應(yīng)用 css 動(dòng)畫時(shí)有性能缺陷:
對(duì) 容器 內(nèi) 元素 應(yīng)用 css 動(dòng)畫會(huì)造成頻繁重排和重繪,導(dǎo)致卡頓。
將和 適配區(qū) 尺寸相同的 容器 提升為合成層時(shí)所占內(nèi)存過大,有多少層內(nèi)存就翻多少倍。
為這些實(shí)現(xiàn)方案提升性能就要針對(duì) 容器 動(dòng)畫,并減小 容器 的尺寸,最好是和一層里所有 元素 的最小總面積相等,做到 精簡適配
精簡適配
公式
推導(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)示例
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> div { 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> <div></div> <!-- 容器 --> </body> </html>
<svg> 實(shí)現(xiàn)示例
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
來定位,而 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
嵌入普通 div
方案對(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)圖片 | ? |
上述內(nèi)容就是怎么在html5中實(shí)現(xiàn)分層屏幕適配,你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(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)容。