摘要:單屏適配有或,多屏常見是依寬。整層適配為確保各層元素同步縮放,不走樣,每層的適配區(qū)應(yīng)當(dāng)?shù)扔谠O(shè)計稿大小。直接的實現(xiàn)就是構(gòu)造和適配區(qū)一樣尺寸的容器,整層適配。值為時對應(yīng)適配。這下媽媽再也不用擔(dān)心我還原問題屏幕適配問題了。
轉(zhuǎn)載請注明出處:http://hai.li/2018/03/14/h5-screen-adaptation.html
設(shè)計大大,這次真的是 "按設(shè)計稿來" 了,因為現(xiàn)在,任何機子都是設(shè)計稿標(biāo)準(zhǔn)機! 開發(fā)同學(xué),這下你就直接讀設(shè)計稿標(biāo)注就好了啦!
屏幕適配屏幕適配應(yīng)當(dāng)指內(nèi)容 適配區(qū) 和 屏幕區(qū) 間的適配關(guān)系。
單屏適配有 contain、cover 或 fill,多屏常見是 依寬 。
contain 和 cover 還需要 定位 來處理留白和超出的內(nèi)容。
而同一個 H5 里不同內(nèi)容往往用不同適配方式,即 分層。
頁面加載后 js 往往需要延時至少 70ms 才能獲取正確的 webview 寬高
css 往往最先執(zhí)行,且 cssom 的解析往往和 dom 在最開始并行構(gòu)建
js 會等待 dom 和 cssom 處理完后才能執(zhí)行,而 css 只需等待 dom
相比 js 在切換橫豎屏?xí)r要切換 2 次進程來重繪,css 無需切換
對于屏幕適配這類表現(xiàn)問題,能用 css 實現(xiàn)就應(yīng)該用 css 實現(xiàn)。
整層適配為確保各層元素同步縮放,不走樣,每層的 適配區(qū) 應(yīng)當(dāng)?shù)扔谠O(shè)計稿大小。
直接的實現(xiàn)就是構(gòu)造和 適配區(qū) 一樣尺寸的 容器, 整層適配。
容器 內(nèi)可以有若干個相同適配方式的 元素。
以 svg 實現(xiàn)為例:
實際效果:
整層適配 實現(xiàn)簡單,開發(fā)時直接讀取設(shè)計稿值,可以滿足大部分靜態(tài)頁面需求。
但在 h5 動畫多的時候,就得考慮動畫流暢,頁面性能了。
用可替換元素如