H5 分層螢幕適配

設計大大，這次真的是 "按設計稿來" 了，因為現在，任何機子都是設計稿標準機！ 開發同學，這下你就直接讀設計稿標註就好了啦！

螢幕適配應當指內容適配區和螢幕區間的適配關係。 單屏適配有contain、cover或fill，多屏常見是依寬。contain和cover還需要定位來處理留白和超出的內容。 而同乙個 h5 裡不同內容往往用不同適配方式，即分層。

對於螢幕適配這類表現問題，能用 css 實現就應該用 css 實現。

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

.layer 
style>

整層適配實現簡單，開發時直接讀取設計稿值，可以滿足大部分靜態頁面需求。 但在 h5 動畫多的時候，就得考慮動畫流暢，頁面效能了。 用可替換元素如等做容器，以及用背景圖做元素的， 在應用 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 
style>
src=""/>
body>
html>
複製**

div 
style>
div>
body>
html>
複製**
svg 
svgimage 
style>

螢幕適配方案非常多，選哪種方式實現整層適配或精簡適配，下面是對比

方案縮放

定位文字縮放

相容padding-top 百分比

只能依寬✓✗

✓viewport✓✗

✓支援情況複雜

object-fit✓✓

✗移動端 android 4.4.4+

svg preserveratio✓✓

✓移動端 android 3.0+

(max/min)-(width/height)✓✓

固定文字

✓background-size✓✓

文字轉✓

H5開發螢幕適配

width 設定layout viewport寬度，為乙個正整數，或者device width.height 設定layout viewport高度，為乙個正整數，或者device height initital scale 設定頁面的初始縮放值，為乙個數字，可以帶小數 maximum scale ...

h5適配手機

1 使用meta標籤，這也是普遍使用的方法，理論上講使用這個標籤是可以適應所有尺寸的螢幕的，但是各裝置對該標籤的解釋方式及支援程度不同造成了不能相容所有瀏覽器或系統。首先解釋該標籤的含義 解釋 content中的 width 這個width指的是什麼寬度，我看過的文章對這個都沒有解釋的很清楚，有幾個...

h5移動端適配

原理 postcss function 視覺稿的1 10 在index.html中指定 font size為document寬度的1 10 iphonex 的解析度 2436 1125 pt 812 375 dpr 3 iphonexr的解析度 1792 828 pt 896 414 dpr 3 i...