資訊專欄INFORMATION COLUMN
摘要：真的是給我們新手學習移動端適配造成不少困惑英語真的很重要呀。細節高清屏上的處理其實并不是所有做移動端適配的人都一定會遇到這個問題。
一次搞清楚移動端這幾個坑爹的單位慨念
目錄:
一、讓坑爹的單位,不再坑爹
二、需要準備什么樣的設計稿
三、rem方案的原理和細節
高清屏上,位圖的處理
高清屏上,關于border: 1px的處理
移動端屏幕的自動適配的處理
移動端屏幕上字體大小的處理
一、讓坑爹的單位,不再坑爹移動端適配本身不難,但是因為涉及到單位轉換,想要解釋清楚移動端適配方案,你必須要搞清楚各個單位的慨念。
但是由于中英翻譯的問題,我發現很多文章在講解移動端適配時,關于單位,我們有一萬種翻譯方法...
"物理像素、邏輯像素、物理分辨率、邏輯分辨率、實際像素、css像素、設備像素、ppi、pt、dpr。"
真的是給我們新手學習移動端適配造成不少困惑,英語真的很重要呀。下面分享一下,我覺得最靠譜最需要理解的4個慨念。
推薦把這4個名詞記住,我覺得翻譯的很貼切,好理解。
物理像素(physical pixel) : 顯示器上最小的物理顯示單位,蘋果的retina屏幕很清晰吧?就是因為它的物理像素很高。
設備獨立像素(density-independent pixel) : 這個是計算機坐標系統里的虛擬慨念,這個點代表一個可以由程序使用的虛擬像素(比如: css像素)
設備像素比(device pixel ratio) : 也叫dpr。 設備像素比 = 物理像素 / 設備獨立像素 。你也可以通過window.devicePixelRatio獲取設備像素比
位圖像素 : png, jpg, gif這類都是位圖,位圖像素就是位圖的最小數據單元
舉個栗子以iphone6來說,
物理像素分辨率: 750 * 1334
設備獨立像素分辨率 : 375 * 667
設備像素比: 2
不管是高清屏幕還是普通屏幕,一個11 css像素那么大的物理尺寸是一樣的,區別在于高清屏上一個一個11 css像素那么大的地方,對應2*2個物理像素,所以很清晰。
在普通屏幕下1個css像素(11)對應1個物理像素(11)
在高清屏幕下1個css像素(11)對應4個物理像素(22)
不知道看完這個例子,你是否能理解這些叫法的區別。如果還是有些迷糊,可以看下面的補充說明 ; 如果已經了解,可以跳過下面一小節。
關于這4個叫法的補充說明:物理像素(physical pixel): 物理像素越大,屏幕越清晰。
設備獨立像素(density-independent pixel) : 也叫密度無關像素。這個設備獨立像素,就是你眼睛看到的手機大小有關。
2個手機看上去一樣大? 那他們設備獨立獨立像素就是一樣的。也就是說我不管你高清屏還是什么**屏設備獨立像素只跟我這個設備看上去大不大有關。
設備看上去很大? 那設備獨立像素就大 ; 設備看上去很小? 那設備獨立像素就小
所以我覺得設備獨立像素(density-independent pixel)。這個翻譯比較貼切也好理解。只跟設備看上去的大小相關。
很多翻譯也管設備獨立像素叫做: 邏輯像素 、 css像素 、 實際像素...
二、需要準備什么樣的設計稿首先，選取一款手機的屏幕寬高作為基準(以前是iphone4的320×480，現在更多的是iphone6的375×667)。
對于retina屏幕(如: dpr=2)，為了達到高清效果，視覺稿的畫布大小會是基準的2倍，也就是說像素點個數是原來的4倍（對iphone6而言：原先的375×667，就會變成750×1334）。
三、rem方案的原理和細節rem方案的原理:
讓需要動態變化的布局、圖片的單位都用rem來寫。比如width: 2rem
那么2rem究竟表示多少呢? 這個和根元素html的font-size屬性相關, 比如font-size為75px,那么 2rem 就表示150px
所以只要html的font-size可以根據屏幕的尺寸和dpr動態的變化,那么所有以rem為單位的元素都會動態變化。
這個就是rem能夠適配的基本原理。至于屏幕的尺寸和dpr都是可以通過js或者css獲取的。
細節1: 高清屏上,位圖的處理常見的位圖,包括png / jpg / gif類型的圖片。只有一個位圖像素對應一個物理像素時,位圖才會被高質量的顯示
所以常見的問題就是: png圖片在普通屏幕上正常顯示,但是在高清屏上,會出現位圖像素不夠的情況,導致圖片模糊。
所以其實比較好的解決方案就是:
在根據不同的dpr,顯示不同的位圖。
另一個就是可以不用位圖,改用矢量圖、字體圖標、轉成base64。不用位圖自然就沒有位圖的問題了。
細節2: 高清屏上,border: 1px的處理其實并不是所有做移動端適配的人,都一定會遇到這個問題。
比如你的設計師給了一張iphone6為基準的 750*1334 的設計稿,里面有一個border標注的是1px。
所以設計師實際上想要的是retina屏下的1px,也就是普通屏幕下的0.5px。
但問題是: 并不是手機端屏幕都支持0.5px,ios7之下或者安卓機都可能把0.5解析成0px
這里給到一種解決方案: 設置initial-scale=0.5
這樣，頁面中的所有的border: 1px都將縮小0.5，從而達到border: 0.5px;的效果。
然而，頁面scale，必然會帶來一些問題：
字體大小會被縮放
頁面布局會被縮放(如: div的寬高等)
細節3: 移動端屏幕的自動適配的處理rem原理: 根據手機的屏幕尺寸和dpr,動態的修改html的font-size(基準值)
求rem
1 rem = document.documentElement.clientWidth * dpr / 10
(1) 乘以dpr，是因為頁面有可能為了實現1px border頁面會縮放(scale) 1/dpr 倍(如果沒有，dpr=1),。
(2) 除以10，是為了取整，方便計算(理論上可以是任何值)
求iphone6的1rem 例子:
iphone6的 1rem : 375px * 2 / 10 = 75px
知道1rem是多少后,如何寫其他的css呢?
比如width: 150px, 我們就可以寫成2rem
實際上,我們往往通過一個px2rem的函數,來做轉換。算法就是 設計稿上某個div的寬度值 / 1rem的像素值, 例如 : 150px / 75px = 2rem
細節4: 移動端屏幕上字體大小的處理移動端上,關于字體大小的需求,一般都是希望各個屏幕的字體都是保持一樣大的。
一般解決方案,就是根據dpr,設置不同的font-size,讓字體大小保持一致
推薦再讀了很多文章后,覺得這篇文章講的最清楚,所以本文也算是對自己學習知識的一個整理。
http://www.html-js.com/articl...
關于viewport的講解很詳細
https://www.cnblogs.com/2050/...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115765.html
摘要：真的是給我們新手學習移動端適配造成不少困惑英語真的很重要呀。細節高清屏上的處理其實并不是所有做移動端適配的人都一定會遇到這個問題。 一次搞清楚移動端這幾個坑爹的單位慨念 目錄: 一、讓坑爹的單位,不再坑爹 二、需要準備什么樣的設計稿 三、rem方案的原理和細節 高清屏上,位圖的處理 高清屏上,關于border: 1px的處理 移動端屏幕的自動適配的處理 移動端屏幕上字體大小的處理...
摘要：第一種情況也不討論了，通過斷點適配后，其實你處理的還是第二種情況。至于移動端，支持情況不錯，可以在生產環境使用。 css中的單位很多，%、px、em、rem，以及比較新的vw、vh等。每個單位都有特定的用途，比如當需要設置一個矩形的寬高比為16:9，并且隨屏幕寬度自適應時，除了用%，其他單位是很難做到的。所以不存在說某個單位是錯誤的，某個單位是最好的這種說法。 那本文說的頁面適配，指的...
摘要：第一種情況也不討論了，通過斷點適配后，其實你處理的還是第二種情況。至于移動端，支持情況不錯，可以在生產環境使用。 css中的單位很多，%、px、em、rem，以及比較新的vw、vh等。每個單位都有特定的用途，比如當需要設置一個矩形的寬高比為16:9，并且隨屏幕寬度自適應時，除了用%，其他單位是很難做到的。所以不存在說某個單位是錯誤的，某個單位是最好的這種說法。 那本文說的頁面適配，指的...
閱讀 2569·2021-11-23 09:51
閱讀 2481·2021-09-30 09:48
閱讀 1076·2021-09-10 10:51
閱讀 2213·2021-08-12 13:22
閱讀 3567·2021-08-11 10:24
閱讀 2166·2019-08-30 15:55
閱讀 646·2019-08-30 14:05
閱讀 3211·2019-08-30 13:03
