轉載請註明出處:hai.li/2018/03/14/…css
設計大大,此次真的是 "按設計稿來" 了,由於如今,任何機子都是設計稿標準機! 開發同窗,這下你就直接讀設計稿標註就行了啦!html
屏幕適配應當指內容 適配區 和 屏幕區 間的適配關係。 單屏適配有 contain、cover 或 fill,多屏常見是 依寬 。 contain 和 cover 還須要 定位 來處理留白和超出的內容。 而同一個 H5 裏不一樣內容每每用不一樣適配方式,即 分層。android
對於屏幕適配這類表現問題,能用 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
爲這些實現方案提高性能就要針對 容器 動畫,並減少 容器 的尺寸,最好是和一層裏全部 元素 的最小總面積相等,作到 精簡適配工具
推導過程見 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)
複製代碼
w/v
,max-height 爲 h/g
時對應 contain 適配。w/v
,min-height 爲 h/g
時對應 cover 適配。w/v
,height 爲 h/g
時表示 fill 適配。max-width
和 max-height
時,用 zoom: 10
放大或者直接修改圖片原始尺寸。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="http://ui.qzone.com/544x142"/> <!-- 元素 -->
</body>
</html>
複製代碼
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>
複製代碼
preserveAspectRatio
的 meetOrSlice
爲 meet
時對應 contain 適配。preserveAspectRatio
的 meetOrSlice
爲 slice
時對應 cover 適配。preserveAspectRatio
值爲 none
時對應 fill 適配。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
嵌入普通 div
屏幕適配方案很是多,選哪一種方式實現 整層適配 或 精簡適配,下面是對比
方案 | 縮放 | 定位 | 文字縮放 | 兼容 |
---|---|---|---|---|
padding-top 百分比 | 只能依寬 | ✓ | ✗ | ✓ |
viewport | ✓ | ✗ | ✓ | 支持狀況複雜 |
object-fit | ✓ | ✓ | ✗ | 移動端 android 4.4.4+ |
svg preserveRatio | ✓ | ✓ | ✓ | 移動端 android 3.0+ |
(max/min)-(width/height) | ✓ | ✓ | 固定文字 | ✓ |
background-size | ✓ | ✓ | 文字轉圖片 | ✓ |