移動端Web適配的兩種作法思路總結

時間 2019-11-10

標籤移動 web 適配兩種作法思路總結欄目無線简体版

原文原文鏈接

看了幾篇文章，理一下網易跟淘寶移動端適配的思路，主要是參考從網易與淘寶的font-size思考前端設計稿與工做流javascript

像素相關概念

物理像素(physical pixel)

一個物理像素是顯示器(手機屏幕)上最小的物理顯示單元，在操做系統的調度下，每個設備像素都有本身的顏色值和亮度值。css

其值也就是咱們常說的分辨率html

設備獨立像素(density-independent pixel)

設備獨立像素(也叫密度無關像素)，能夠認爲是計算機座標系統中得一個點，這個點表明一個能夠由程序使用的虛擬像素(好比: css像素)，而後由相關係統轉換爲物理像素。前端

簡稱dip，也能夠稱爲CSS像素java

設備像素比(device pixel ratio)

設備像素比(簡稱dpr)定義了物理像素和設備獨立像素的對應關係，它的值能夠按以下的公式的獲得：git

設備像素比 = 物理像素 / 設備獨立像素 // 在某一方向上，x方向或者y方向

網易的作法

目的

css中使用的尺寸與設計稿保持一致，body的寬度設爲屏幕寬度github

原理

將頁面寬度定爲屏幕寬度，經過設置html的font-size與使用rem來實現尺寸與設計稿一致web

思路

假設設計稿寬度爲640px
那麼以設計稿爲準，設置body的寬度爲640px
因爲使用rem單位，所以須要設置html標籤的font-size
爲計算方便，取100px爲參照，因此body的寬度爲6.4rem
因爲設備的dip!=設計稿寬度，所以font-size=deviceWidth/6.4
css尺寸爲：設計稿標註尺寸/100

淘寶的作法

目的

頁面大小與設計稿保持一致算法

原理

設置meta viewport中的scale保證頁面大小與設計稿一致，使用remmarkdown

思路

meta viewport中device-width的算法爲：設備的物理分辨率/(devicePixelRatio * scale)
而每臺設備的devicePixelRatio都是已知的，可經過window.devicePixelRatio獲取
JavaScript動態計算設置scale，包括initial-scale，maximum-scale，minimum-scale
動態設置html的font-size，爲屏幕分辨率/10
css尺寸爲：設計稿標註尺寸/html的font-size

關於font-size能不能使用rem的問題

流雲諸葛在文章中說font-size不能使用rem，要用media query，而實際上，網易的font-size也是有用rem來做爲單位的。

那麼爲何會說font-size不能使用rem呢？到底能不能用rem？

答案是能的。

說不能多是由於在網頁中有可能使用了點陣字體，也叫位圖字體，因爲位圖的緣故，點陣字體很難進行縮放。
這個概念與矢量字體相對應。

網上有給出對於文字使用px的緣由的文章

根據如下兩個緣由，對於文字使用px：

在大屏設備但願看到更多的文字

中文點陣最好是在12px，14px，16px這種尺寸，使用rem就會沒法避免使用13px，15px尺寸，這樣文字會顯示的很奇怪

雖然如此，但沒有使用點陣字體的話，在一些狀況，好比在須要自適應的狀況下，使用rem也是沒問題的。

關於font-size的更新（2016-09-14 11:50）

前面說到font-size能不能使用rem，給出的答案是能。

可是通過一番摸索，這邊我仍是建議字號用px來做爲單位。

爲何呢，除了點陣字體的緣由，咱們在使用rem時，在不一樣設備的字體大小不同，而比較適合閱讀的字號大小是14px或16px之類。

好比：iPhone5的設計稿是640px，那麼根據網易的作法，html的font-size就是50px，那麼咱們根據設計稿定義一段文本的font-size爲0.16rem，換算成px就是0.16 * 50 = 8 px，這樣，在4吋iPhone上看這段文本時，就會顯得很小；若是設置成0.32rem，在4吋iPhone上看是正常了，可是在較大屏幕上看，又會顯得太大。

還有一個緣由，使用rem最終是轉換成px的，這樣，轉換後的px就有可能出現存在小數的狀況，這個時候就可能出現1px的不對稱。

所以咱們在給文本定義字號時仍是使用px，應對不一樣設備，使用media query，或者像淘寶的那種作法，在html中加上data-dpr，算出當前設備的dpr，再根據不一樣dpr來區分文本字號大小。

.a{
  font-size:12px;
}
[data-dpr="2"] .a{
  font-size: 24px;
}
[data-dpr="3"] .a{
  font-size: 36px;
}

參考

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。