H5 分層屏幕適配

轉載請註明出處:hai.li/2018/03/14/…css

設計大大,此次真的是 "按設計稿來" 了,由於如今,任何機子都是設計稿標準機! 開發同窗,這下你就直接讀設計稿標註就行了啦!html

屏幕適配

屏幕適配應當指內容 適配區屏幕區 間的適配關係。 單屏適配有 containcoverfill,多屏常見是 依寬containcover 還須要 定位 來處理留白和超出的內容。 而同一個 H5 裏不一樣內容每每用不一樣適配方式,即 分層android


優選 CSS

  • 頁面加載後 js 每每須要延時至少 70ms 才能獲取正確的 webview 寬高
  • css 每每最早執行,且 cssom 的解析每每和 dom 在最開始並行構建
  • js 會等待 dom 和 cssom 處理完後才能執行,而 css 只需等待 dom
  • 相比 js 在切換橫豎屏時要切換 2 次進程來重繪,css 無需切換

對於屏幕適配這類表現問題,能用 css 實現就應該用 css 實現。web


整層適配

爲確保各層元素同步縮放,不走樣,每層的 適配區 應當等於設計稿大小。 直接的實現就是構造和 適配區 同樣尺寸的 容器整層適配容器 內能夠有若干個相同適配方式的 元素。 以 svg 實現爲例:sass

<!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>
複製代碼

實際效果:dom

整層適配 實現簡單,開發時直接讀取設計稿值,能夠知足大部分靜態頁面需求。 但在 h5 動畫多的時候,就得考慮動畫流暢,頁面性能了。 用可替換元素如 <img> <object> <svg> 等作 容器,以及用背景圖作 元素 的, 在應用 css 動畫時有性能缺陷:svg

  • 容器元素 應用 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-widthmax-height 時,用 zoom: 10 放大或者直接修改圖片原始尺寸。
  • cover 適配時,若是圖片原始尺寸大於 min-widthmin-height 時,用 zoom: .1 縮小或者直接修改圖片原始尺寸。
  • top left 中百分比是相對屏幕寬 u 和高 f 的,對應 m*un*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 實現示例

  • background-size 值爲 contain 時對應 contain 適配。
  • background-size 值爲 cover 時對應 cover 適配。
  • background-size 值爲 100% 100% 時對應 `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%; /* 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>
<div></div> <!-- 容器 -->
</body>
</html>
複製代碼

實現示例

  • preserveAspectRatiomeetOrSlicemeet 時對應 contain 適配。
  • preserveAspectRatiomeetOrSliceslice 時對應 cover 適配。
  • preserveAspectRatio 值爲 none 時對應 fill 適配。
  • 這裏 preserveAspectRatiomeetOrSlice 相對的是容器,不是 適配區 這裏用 transform 來定位,而 preserveAspectRatiomeetOrSlice 固定爲 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 等工具來輔助簡化。 設計稿寬 vg 通常是頁面級常量。 只需讀取設計稿裏每一個 元素 的橫座標 x 、縱座標 y 、寬 w 和 高 h,而後工具生成 css 便可。 這下媽媽不再用擔憂我還原問題、屏幕適配問題了。優化

文字處理

  • 文字固定或單行不固定,svgtext 標籤能夠處理
  • 文字固定或單行不固定還能夠將文字轉爲圖片
  • 文字多行不固定,能夠藉助 svgforeignObject 嵌入普通 div

方案對比

屏幕適配方案很是多,選哪一種方式實現 整層適配精簡適配,下面是對比

方案 縮放 定位 文字縮放 兼容
padding-top 百分比 只能依寬
viewport 支持狀況複雜
object-fit 移動端 android 4.4.4+
svg preserveRatio 移動端 android 3.0+
(max/min)-(width/height) 固定文字
background-size 文字轉圖片
相關文章
相關標籤/搜索