目錄:移動端適配本身不難,但是因為涉及到單位轉換,想要解釋清楚移動端適配方案,你必須要搞清楚各個單位的慨念。
但是由於中英翻譯的問題,我發現很多文章在講解移動端適配時,關於單位,我們有一萬種翻譯方法...
"物理畫素、邏輯畫素、物理解析度、邏輯解析度、實際畫素、css畫素、裝置畫素、ppi、pt、dpr。"
真的是給我們新手學習移動端適配造成不少困惑,英語真的很重要呀。下面分享一下,我覺得最靠譜最需要理解的4個慨念。
推薦把這4個名詞記住,我覺得翻譯的很貼切,好理解。
舉個栗子
以iphone6來說,
不管是高畫質螢幕還是普通螢幕,乙個11 css畫素那麼大的物理尺寸是一樣的,區別在於高清屏上乙個乙個11 css畫素那麼大的地方,對應2*2個物理畫素,所以很清晰。
在普通螢幕下1個css畫素(11)對應1個物理畫素(11)
在高畫質螢幕下1個css畫素(11)對應4個物理畫素(22)
不知道看完這個例子,你是否能理解這些叫法的區別。如果還是有些迷糊,可以看下面的補充說明 ; 如果已經了解,可以跳過下面一小節。
關於這4個叫法的補充說明:
2個手機看上去一樣大? 那他們裝置獨立獨立畫素就是一樣的。也就是說我不管你高清屏還是什麼**屏裝置獨立畫素只跟我這個裝置看上去大不大有關。
裝置看上去很大? 那裝置獨立畫素就大 ; 裝置看上去很小? 那裝置獨立畫素就小
所以我覺得裝置獨立畫素(density-independent pixel)。這個翻譯比較貼切也好理解。只跟裝置看上去的大小相關。
很多翻譯也管裝置獨立畫素叫做: 邏輯畫素 、 css畫素 、 實際畫素...
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在普通螢幕上正常顯示,但是在高清屏上,會出現位影象素不夠的情況,導致模糊。
所以其實比較好的解決方案就是:
細節2: 高清屏上,border: 1px的處理
其實並不是所有做移動端適配的人,都一定會遇到這個問題。
比如你的設計師給了一張iphone6為基準的 750*1334 的設計稿,裡面有乙個border標註的是1px。
所以設計師實際上想要的是retina屏下的1px,也就是普通螢幕下的0.5px。
但問題是: 並不是手機端螢幕都支援0.5px,ios7之下或者安卓機都可能把0.5解析成0px
這裡給到一種解決方案: 設定initial-scale=0.5
然而，頁面scale，必然會帶來一些問題：
細節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 : 375px * 2 / 10 = 75px比如width: 150px, 我們就可以寫成2rem
實際上,我們往往通過乙個px2rem的函式,來做轉換。演算法就是 設計稿上某個div的寬度值 / 1rem的畫素值, 例如 : 150px / 75px = 2rem
細節4: 移動端螢幕上字型大小的處理
移動端上,關於字型大小的需求,一般都是希望各個螢幕的字型都是保持一樣大的。
一般解決方案,就是根據dpr,設定不同的font-size,讓字型大小保持一致
再讀了很多文章後,覺得這篇文章講的最清楚,所以本文也算是對自己學習知識的乙個整理。
關於viewport的講解很詳細
一次搞清楚ajax和axios fetch的區別
前端請求基於ajax的時代已逐漸成為將要成為歷史了，es6的fetch和node的axios將會逐漸代替它，本篇博文將就這三者的區別做以比較方便對後兩者的理解和使用。ajax ajax error function axios axios 是乙個基於 promise 的 http 庫，可以用在瀏覽器...
這一次徹底搞清楚閉包函式
閉包 closure 是函式式程式設計的重要的語法結構。函式式程式設計是一種程式設計正規化 而面向過程程式設計和物件導向程式設計也都是程式設計正規化 在面向過程程式設計中，我們見到過函式 function 在物件導向程式設計中，我們見過物件 object 函式和物件的根本目的是以某種邏輯方式組織 並...
bat中幾個要搞清楚的東西（一）
bat中enabledelayedexpansion用來設定變數的延遲擴充套件，通過以下語句可以開啟延遲擴充套件，setlocal enabledelayedexpansion這樣設定後變數的擴充套件時間將發生在execution時而不是變數 parse時，可以通過下邊的例子看出其作用。echo o...