国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

H5 分層屏幕適配

Arno / 2073人閱讀

摘要:單屏適配有或,多屏常見是依寬。整層適配為確保各層元素同步縮放,不走樣,每層的適配區(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)系。
單屏適配有 containcoverfill,多屏常見是 依寬
containcover 還需要 定位 來處理留白和超出的內(nèi)容。
而同一個 H5 里不同內(nèi)容往往用不同適配方式,即 分層

優(yōu)選 CSS

頁面加載后 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 動畫多的時候,就得考慮動畫流暢,頁面性能了。
用可替換元素如 background 實現(xiàn)示例

background-size 值為 contain 時對應(yīng) contain 適配。

background-size 值為 cover 時對應(yīng) cover 適配。

background-size 值為 100% 100% 時對應(yīng) `fill 適配。

background-position 百分比和 o p 意義相同





實現(xiàn)示例

preserveAspectRatiomeetOrSlicemeet 時對應(yīng) contain 適配。

preserveAspectRatiomeetOrSliceslice 時對應(yīng) cover 適配。

preserveAspectRatio 值為 none 時對應(yīng) fill 適配。

這里 preserveAspectRatiomeetOrSlice 相對的是容器,不是 適配區(qū) 這里用 transform 來定位,而 preserveAspectRatiomeetOrSlice 固定為 xMinYMin





 
   


輔助工具

手動計算百分比及寫 css 很麻煩,可以借助 sass 等工具來輔助簡化。
設(shè)計稿寬 vg 一般是頁面級常量。
只需讀取設(shè)計稿里每個 元素 的橫坐標(biāo) x 、縱坐標(biāo) y 、寬 w 和 高 h,然后工具生成 css 即可。
這下媽媽再也不用擔(dān)心我還原問題、屏幕適配問題了。

文字處理

文字固定或單行不固定,svgtext 標(biāo)簽可以處理

文字固定或單行不固定還可以將文字轉(zhuǎn)為圖片

文字多行不固定,可以借助 svgforeignObject 嵌入普通 div

方案對比

屏幕適配方案非常多,選哪種方式實現(xiàn) 整層適配精簡適配,下面是對比

方案 縮放 定位 文字縮放 兼容
padding-top 百分比 只能依寬 ? ? ?
viewport ? ? ? 支持情況復(fù)雜
object-fit ? ? ? 移動端 android 4.4.4+
svg preserveRatio ? ? ? 移動端 android 3.0+
(max/min)-(width/height) ? ? 固定文字 ?
background-size ? ? 文字轉(zhuǎn)圖片 ?

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/115816.html

相關(guān)文章

  • 從零搭建移動H5開發(fā)項目實戰(zhàn)

    摘要:并且除了常用的端,還要考慮微信端,或者是端。所以我們要有一套機制,在端上走的代碼,在端或者微信端上走端對應(yīng)的代碼。對于一個從零開始的移動端項目,我總結(jié)了以上這些移動開發(fā)難點,希望之后的人能少踩點坑,站在我的肩膀上提高項目開發(fā)的效率和質(zhì)量。 從零搭建移動H5開發(fā)項目實戰(zhàn) 前端H5的前世今身 在Pc的時代,前端技術(shù)無疑統(tǒng)治了大多數(shù)用戶的交互界面!而在移動為王的今天,NA開發(fā)在早期占領(lǐng)了大多...

    terro 評論0 收藏0
  • 從零搭建移動H5開發(fā)項目實戰(zhàn)

    摘要:并且除了常用的端,還要考慮微信端,或者是端。所以我們要有一套機制,在端上走的代碼,在端或者微信端上走端對應(yīng)的代碼。對于一個從零開始的移動端項目,我總結(jié)了以上這些移動開發(fā)難點,希望之后的人能少踩點坑,站在我的肩膀上提高項目開發(fā)的效率和質(zhì)量。 從零搭建移動H5開發(fā)項目實戰(zhàn) 前端H5的前世今身 在Pc的時代,前端技術(shù)無疑統(tǒng)治了大多數(shù)用戶的交互界面!而在移動為王的今天,NA開發(fā)在早期占領(lǐng)了大多...

    pepperwang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<