S5讓分層螢幕適配-H5教程-PHP中文網

首頁

web前端

H5教程

S5讓分層螢幕適配

php中世界最好的语言

Mar 20, 2018 pm 01:25 PM

分層螢幕適配

這次帶給大家S5讓分層螢幕適配，S5讓分層螢幕適配的注意事項有哪些，下面就是實戰案例，一起來看一下。

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

螢幕適配

螢幕適配應當指內容適配區與螢幕區間的適配關係。

單一螢幕適配有 contain、cover 或 fill，多螢幕常見是依寬。

contain 和 cover 還需要定位來處理留白和超出的內容。

而同一個 H5 裡不同內容往往用不同適配方式，即分層。

優選CSS

頁面載入後js 往往需要延時至少70ms 才能取得正確的webview 寬高
css 往往最先執行，且cssom 的解析往往和dom 在最開始並行建構
#js 會等待dom 和cssom 處理完後才能執行，而css 只要等待dom
#比較js 在切換橫豎螢幕時要切換2 次進程來重繪， 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 動畫時有效能缺陷：

#對容器內元素套用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 實作範例

<a href="http://www.php.cn/code/872.html" target="_blank">background-size</a> 值为 contain 时对应 contain 适配。
background-size 值为 cover 时对应 cover 适配。
background-size 值为 100% 100% 时对应 `fill 适配。
<a href="http://www.php.cn/wiki/896.html" target="_blank">background-position</a> 百分比和 o p 意义相同

<!doctype html>
<html>
<body>
<style>
p {
  position: absolute;
  width: 50.37037037037037%; /* w3 = w/v*u 其中 w = 544，v = 1080 */
  height: 7.395833333333333%; /* 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 = (x - m*v)/w 其中 m = .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>
<p></p> <!-- 容器 -->
</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*w3 + (x - m*v)/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.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>
<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 嵌入普通 p

方案对比

屏幕适配方案非常多，选哪种方式实现整层适配或精简适配，下面是对比

方案	缩放	定位	文字缩放	兼容
padding-top 百分比	只能依宽	✓	✗	✓
viewport	✓	✗	✓	支持情况复杂
object-fit	✓	✓	✗	移动端 android 4.4.4+
svg preserveRatio	✓	✓	✓	移动端 android 3.0+
(max/min)-(width/height)	✓	✓	固定文字	✓
background-size	✓	✓	文字转图片	✓

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7797

Java教學

1644

CakePHP 教程

1402

Laravel 教程

1299

PHP教程

1234

Related knowledge

如何在iPhone上將時間顯示在鎖定畫面壁紙之下 Dec 18, 2023 am 11:27 AM

深度效果是iOS上一個很酷的鎖定螢幕功能，其中部分壁紙覆蓋了數位時鐘。這基本上提供了一種海市蜃樓般的效果，牆紙看起來就像在與鎖定螢幕元素互動一樣。在這篇文章中，我們將解釋深度效果的全部內容，以及如何在iPhone上的桌布後面取得鎖定畫面時間/時鐘。什麼是iPhone鎖定螢幕上的深度效果？深度效果為您的牆紙添加多層深度。當您套用鎖定螢幕桌布時，iOS會使用iPhone的神經網路引擎來偵測您套用的影像中的深度資訊。如果成功，您的iPhone將能夠將您想要聚焦的主題與壁紙的其他元素分開。一旦偵測到被攝體，景深效果會將

教你如何在win10中關閉螢幕自動鎖定螢幕功能 Jan 08, 2024 am 11:49 AM

很多朋友都需要在離開電腦時關閉螢幕以保護螢幕，但是又不想因為關閉螢幕而鎖屏，回來的時候還有輸入密碼才能進入系統，其實我們可以透過設定完成這個步驟，下面就一起來看一下吧。 win10關閉螢幕不鎖定螢幕教學1、先進入設置，選擇「個人化」2、在左邊點選「鎖定畫面介面」3、選擇下方的「螢幕保護程式設定」4、取消勾選「在恢復時顯示登入畫面」5、然後點選「更改電源設定」6、選擇左邊的圖示設定。 7.設定一個關閉顯示器的時間，然後將睡眠狀態改為「從不」8、然後回到剛才的電源設置，選擇下面的睡眠時間。 9.和上方使用相同的

iPhone螢幕截圖不起作用：如何修復 May 03, 2024 pm 09:16 PM

螢幕截圖功能在您的iPhone上不起作用嗎？截圖非常簡單，因為您只需同時按住「提高音量」按鈕和「電源」按鈕即可抓取手機螢幕。但是，還有其他方法可以在設備上捕獲幀。修復1–使用輔助觸控使用輔助觸控功能截取螢幕截圖。步驟1–轉到您的手機設定。步驟2–接下來，點選以開啟「輔助功能」設定。步驟3–開啟「觸摸」設定。步驟4–接下來，開啟「輔助觸控」設定。步驟5–打開手機上的「輔助觸控」。步驟6–打開“自訂頂級選單”以存取它。步驟7–現在，您只需將這些功能中的任何一個連結到螢幕擷取即可。因此，點擊那裡的首

miniled螢幕傷眼嗎 Feb 07, 2024 pm 03:48 PM

許多用戶最關心的就是miniled螢幕傷不傷眼的問題，其實這個螢幕雖然亮度可以達到超高，但是不會傷眼的，使用還是可以正常用的。 miniled螢幕傷眼嗎答：不傷眼。 miniled的螢幕亮度雖然會更高，但是在日常使用的時候不會一直持續這個亮度的，只有在需要提高亮度的時候才會顯示，因此不會一直保持高亮度傷眼，這個峰值亮度也是為了更好的呈現和表達。 miniled螢幕介紹1、MiniLED背光顯示技術都是採用的背光源，因此和lcd最大不同就是在背光層2、和lcd的螢幕對比，miniled的表現會更高對比

如何在iPhone中撤銷從主畫面中刪除 Apr 17, 2024 pm 07:37 PM

從主畫面中刪除了重要內容並試圖將其取回？您可以透過多種方式將應用程式圖示放回螢幕。我們已經討論了您可以遵循的所有方法，並將應用程式圖示放回主畫面如何在iPhone中撤消從主畫面中刪除正如我們之前提到的，有幾種方法可以在iPhone上恢復此變更。方法1–替換應用程式庫中的應用程式圖示您可以直接從應用程式庫將應用程式圖示放置在主畫面上。步驟1–橫向滑動以尋找應用程式庫中的所有應用程式。步驟2–找到您先前刪除的應用程式圖示。步驟3–只需將應用程式圖示從主庫拖曳到主畫面上的正確位置即可。這是將應用程式圖

6000 毫安矽負極電池！小米 15Pro 升級再曝料 Jul 24, 2024 pm 12:45 PM

7月23日消息，部落客數位閒聊站爆料稱，小米15Pro電池容量增大至6000mAh，支援90W有線閃充，這將是小米數位系列電池最大的Pro機型。先前數位閒聊站透露，小米15Pro的電池擁有超高能量密度，矽含量遠高於競品。矽基電池在2023年大規模試水後，第二代矽負極電池被認定為產業未來發展方向，今年將迎來直接競爭的高峰。 1.矽的理論克容量可達4200mAh/g，是石墨克容量的10倍以上（石墨的理論克容量372mAh/g）。對於負極而言，當鋰離子嵌入量達到最大時的容量為理論克容量，這意味著在相同重量下

請勿遮擋螢幕頂端怎麼關閉詳細解說：手機頻繁出現請勿遮擋螢幕頂端關閉方法 Mar 03, 2024 pm 01:31 PM

相信很多小夥伴都遇過手機突然提示：請勿遮擋螢幕頂端的問題，那麼手機為什麼會突然出現這樣的現象呢？下面我們就一起來看一下吧。其實出現這種情況的時候，就是有東西遮擋了手機的距離感應器，所以手機螢幕上才收到這個提示。那麼好好的為什麼會突然收到這樣的提示呢？其實可能就是因為你無意間開啟了手機中的【防誤觸模式】，所以才會出現這樣的問題。那我們該如何關閉呢？其實方法很簡單下面我們就一起來看看吧。方法1：直接依照螢幕提示的透過快捷鍵組合進行關閉。方法2：如果上面的方法沒有用的話，還可以透過打開手機【設

螢幕變成黑白色怎麼調彩色詳細介紹：手機退出黑白模式的方法 Mar 21, 2024 pm 01:12 PM

很多朋友在使用手機時，突然發現手機的操作介面變成了「黑白」的顏色，不知道是什麼原因導致的，也不知道該如何解決，本期文章以安卓手機為例，教大家如何讓手機的操作介面顏色恢復正常。一、設定打開手機的介面，在操作介面找到「齒輪狀」圖示。如下圖：點選該圖標，即可進入手機的設定介面。二、選項手機的操作介面變成了黑白顏色，這與手機的“顯示”設定有關，進入手機的設定介面以後，下拉選單找到“顯示和主題”選項，如下圖：然後點擊“顯示和主題”選項，進入詳情頁。三、改變螢幕顏色進入“顯示和主題”選項之後，下拉式選單找到“

See all articles

S5讓分層螢幕適配

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題