亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

H5 分層屏幕適配

Arno / 2135人閱讀

摘要：?jiǎn)纹吝m配有或，多屏常見是依寬。整層適配為確保各層元素同步縮放，不走樣，每層的適配區(qū)應(yīng)當(dāng)?shù)扔谠O(shè)計(jì)稿大小。直接的實(shí)現(xiàn)就是構(gòu)造和適配區(qū)一樣尺寸的容器，整層適配。值為時(shí)對(duì)應(yīng)適配。這下媽媽再也不用擔(dān)心我還原問(wèn)題屏幕適配問(wèn)題了。

轉(zhuǎn)載請(qǐng)注明出處：http://hai.li/2018/03/14/h5-screen-adaptation.html

設(shè)計(jì)大大，這次真的是 "按設(shè)計(jì)稿來(lái)" 了，因?yàn)楝F(xiàn)在，任何機(jī)子都是設(shè)計(jì)稿標(biāo)準(zhǔn)機(jī)！ 開發(fā)同學(xué)，這下你就直接讀設(shè)計(jì)稿標(biāo)注就好了啦！

屏幕適配

屏幕適配應(yīng)當(dāng)指內(nèi)容 適配區(qū) 和 屏幕區(qū) 間的適配關(guān)系。
單屏適配有 contain、cover 或 fill，多屏常見是 依寬 。
contain 和 cover 還需要 定位 來(lái)處理留白和超出的內(nèi)容。
而同一個(gè) H5 里不同內(nèi)容往往用不同適配方式，即 分層。

優(yōu)選 CSS

頁(yè)面加載后 js 往往需要延時(shí)至少 70ms 才能獲取正確的 webview 寬高

css 往往最先執(zhí)行，且 cssom 的解析往往和 dom 在最開始并行構(gòu)建

js 會(huì)等待 dom 和 cssom 處理完后才能執(zhí)行，而 css 只需等待 dom

相比 js 在切換橫豎屏?xí)r要切換 2 次進(jìn)程來(lái)重繪，css 無(wú)需切換

對(duì)于屏幕適配這類表現(xiàn)問(wèn)題，能用 css 實(shí)現(xiàn)就應(yīng)該用 css 實(shí)現(xiàn)。

整層適配

為確保各層元素同步縮放，不走樣，每層的 適配區(qū) 應(yīng)當(dāng)?shù)扔谠O(shè)計(jì)稿大小。
直接的實(shí)現(xiàn)就是構(gòu)造和 適配區(qū) 一樣尺寸的 容器， 整層適配。
容器 內(nèi)可以有若干個(gè)相同適配方式的 元素。
以 svg 實(shí)現(xiàn)為例：

實(shí)際效果：

整層適配 實(shí)現(xiàn)簡(jiǎn)單，開發(fā)時(shí)直接讀取設(shè)計(jì)稿值，可以滿足大部分靜態(tài)頁(yè)面需求。
但在 h5 動(dòng)畫多的時(shí)候，就得考慮動(dòng)畫流暢，頁(yè)面性能了。
用可替換元素如 background 實(shí)現(xiàn)示例

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

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

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

background-position 百分比和 o p 意義相同
實(shí)現(xiàn)示例

preserveAspectRatio 的 meetOrSlice 為 meet 時(shí)對(duì)應(yīng) contain 適配。

preserveAspectRatio 的 meetOrSlice 為 slice 時(shí)對(duì)應(yīng) cover 適配。

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

這里 preserveAspectRatio 的 meetOrSlice 相對(duì)的是容器，不是 適配區(qū) 這里用 transform 來(lái)定位，而 preserveAspectRatio 的 meetOrSlice 固定為 xMinYMin。
輔助工具

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

文字處理

文字固定或單行不固定，svg 的 text 標(biāo)簽可以處理

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

文字多行不固定，可以借助 svg 的 foreignObject 嵌入普通 div

方案對(duì)比

屏幕適配方案非常多，選哪種方式實(shí)現(xiàn) 整層適配 或 精簡(jiǎn)適配，下面是對(duì)比

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/115816.html

相關(guān)文章

  • 從零搭建移動(dòng)H5開發(fā)項(xiàng)目實(shí)戰(zhàn)

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

    terro 評(píng)論0 收藏0

  • 從零搭建移動(dòng)H5開發(fā)項(xiàng)目實(shí)戰(zhàn)

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

    pepperwang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<