設計大大，這次真的是照設計稿來了，因為現在，任何機子都是設計稿標準機！ 開發同學，這下你就直接唸設計稿標註就好了啦！
螢幕適配螢幕適配應當指內容適配區及螢幕區間的適配關係。
單螢幕適配有contain、cover 或fill，多螢幕常見是依寬。
contain 和cover 還需要定位來處理留白和超越的內容。
而同一個H5 裡不同內容往往用不同適配方式，即分層。
優選CSS對於螢幕適配這類表現問題，能用css 實作就應該用css 實作。
整層適配為確保各層元素同步縮放，不走樣，每層的適配區應等於設計稿大小。
直接的實現就是構造和適配區一樣尺寸的容器， 整層適配。
容器內可以有若干相同適配方式的元素。
以svg實作為例：
<!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>實際效果：
整層適配實作簡單，開發時直接讀取設計稿值，可以滿足大部分靜態頁面需求。
但在h5 動畫多的時候，就得考慮動畫流暢，頁面效能了。
用可替換元素如<img> <object> <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)<img> 實作範例
當設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-width 和max-height 時，用zoom: 10 放大或直接修改圖片原始尺寸。
cover 適配時，如果圖片原始尺寸大於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 實作範例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.3953333%; * 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 = (xwm = .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> 實作範例
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* 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.34558%) - 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 | ✓ | ✓ | 文字轉圖片 | ✓ |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。