移動端適配理解收集

時間 2019-11-17

標籤移動適配理解收集欄目無線简体版

原文原文鏈接

移動端相應式測試網站：http://kuapingce.com/

http://www.cnblogs.com/Charliexie/p/6900640.html

https://segmentfault.com/a/1190000008767416

移動前端開發之viewport的深刻理解

https://www.cnblogs.com/2050/p/3877280.htmljavascript

http://www.jianshu.com/p/84c5cb3a485a

一些基本概念

視窗viewport

物理像素

設備像素，它是顯示設備中的一個最微小的物理部件。每一個像素能夠根據操做系統設置本身的顏色和亮度。
對於前端來講：假設設計稿爲750px。若是這個設備正好能完整顯示750px寬度的設計稿。那麼設備像素或者稱物理像素就是750px。可是可能這個設備的實際寬度就375px。css

設備獨立像素

也稱密度無關像素。能夠認爲是計算機座標系中的一個點，這個點表明一個能夠由程序使用的虛擬像素（好比css像素），而後由相關係統轉換爲物理像素。
對於前端來講：好比ip6的設備獨立像素是375pxhtml

css像素

css像素是一個抽象的單位。主要用在瀏覽器上。
對於前端來講：設計稿多少像素就是多少像素。前端

屏幕密度

指一個設備表面上存在的像素數量。通常是用一英寸有多少像素來計算（PPI）java

設備像素比（device pixel ratio，dpr）

設備像素比 = 物理像素/設備獨立像素
好比，iphone6的物理像素是750，設備獨立像素是375，那麼它的dpr是2web

在javascript中，能夠經過window.devicePixelRatio獲取當前設備的dpr
在css中，能夠經過-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio,-webkit-max-device-pixel-ratio來進行媒體查詢segmentfault

檸檬俱樂部前端適配方案

以iPhone6爲處理標準。
視覺稿的寬度爲750px
把根元素html的font-size設置爲50px，這樣1rem=50px(設爲50是爲了便於計算)
html{font-size:50px;}
那麼頁面的寬度爲15rem
以這樣的規則去計算頁面各元素的寬高
好比一個圖片的寬高爲100*100
那麼樣式寫爲api

img{width:2rem; height:2rem;}

即以iphone6爲基準計算出各元素的rem。瀏覽器

前端適配

關於字體大小的處理，用了以設備獨立像素爲判斷準則的媒體查詢iphone

@media screen and (min-width:320px) {
html {
  font-size: 21.33px
}
body {
  font-size: 12px
}
}

@media screen and (min-width:360px) {
html {
  font-size: 24px
}
body {
  font-size: 12px
}
}

@media screen and (min-width:375px) {
html {
  font-size: 25px
}
body {
  font-size: 12px
}
}

@media screen and (min-width:384px) {
html {
  font-size: 25.6px
}
body {
  font-size: 14px
}
}

@media screen and (min-width:400px) {
html {
  font-size: 26.67px
}
body {
  font-size: 14px
}
}

@media screen and (min-width:414px) {
html {
  font-size: 27.6px
}
body {
  font-size: 14px
}
}

@media screen and (min-width:424px) {
html {
  font-size: 28.27px
}
body {
  font-size: 14px
}
}

@media screen and (min-width:480px) {
html {
  font-size: 32px
}
body {
  font-size: 15.36px
}
}

@media screen and (min-width:540px) {
html {
  font-size: 36px
}
body {
   font-size: 17.28px
}
}

@media screen and (min-width:720px) {
html {
  font-size: 48px  
}
body {
  font-size: 23.04px
}
}

@media screen and (min-width:750px) {
html {
  font-size: 50px
}
body {
  font-size: 24px
}
}

在以上媒體查詢處理中，對應寬度下的根元素html都設置了不同的font-size
好比當width爲550px的時候，font-size爲36px。那麼在這樣的狀況下，剛剛在上面舉例的那個img元素在頁面寬度爲550px的狀況下顯示出來的真是寬度應該是72px。
這個方案裏，處理方式與dpr無關
這個方案的缺點是，用媒體查詢去決定html的font-size，在這樣的狀況下，計算是不精確的，只能保證大致上按比例正常顯示頁面。這樣並非徹底按照以iphone6爲基準的按比例計算。
好比，550px頁面寬度的時候，font-size，若是按照比例來講應該是50/750*550約等於36.67
600px頁面寬度的時候，font-size應該爲40px
而按照這套方案來看頁面寬度爲540px至719px的時候font-size都爲36px
這隻能保證在某範圍內大體的展現，並不精確，而這個大體的值的選取也是各有各的見解。
因此，以上代碼中給出的11個範圍下的font-size不必定是合適的，這11個width範圍也不必定合適，實際有可能不須要這麼多，因此找出這些個範圍，以及每一個範圍最合適的font-size也很麻煩。

網易的適配方案

首先網易使用的是640px的設計稿
應該是以iphone4或者iphone5爲基準來設計的
網易用來算rem的基準是100
因此當寬度是640px=6.4rem

網易的適配方案中，動態計算了html的font-size
deviceWidth=320，font-size=320/6.4=50px---即
320/640*100pxdeviceWidth=375，
font-size=375/6.4=58.5975px
以此類推的計算
經過document.documentElement.clientWidth取得deviceWidth，而後動態計算html的font-size

若是採用這種方法，注意

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

由於這個方法與dpr無關，只是根據設備獨立像素來計算了當前的基準font-size

lib-flxible 前端開發終端適配方案--手淘的適配方案

手淘的lib-flexible庫

<script src="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/??flexible_css.js,flexible.js"></script>

實現思路
執行這個js後，會在html（也就是document.documentElement）上增長一個data-dpr屬性，以及font-size樣式。頁面初始時會給meta的viewport動態的給定scale

以後頁面中的元素，均可以用rem單位來設置。html上的font-size就是rem的基準像素。

flexible將設計稿分紅100份，即100a，10a=1rem。
好比，頁面寬度爲750px，那麼一份爲75px，1rem=75px。
這樣將html的樣式設置爲

<html style='font-size:75px;'>

font-size的計算方法：根元素html的font-size的計算方式是物理像素/10。

因此它的計算方式是與dpr有關，也就能比較精確的計算出當前寬度下的根元素html的font-size。能保證比較精確的按比例去展現頁面。
好比iphone 6 plus，其dpr爲3，設備獨立像素爲414，因此，在iphone 6 plus下，html的font-size應該爲，414*3/10=124.2px

字體大小不用rem，而是根據dpr來設置px

div{font-size:12px;}
[data-dpr='2']div{font-size:24px;}
[data-dpr='3']div{font-size:36px;}

若是在，meta viewport中手動設置了initial-dpr，那麼無論js獲取到的dpr是多少，都會強制認爲dpr是手動設置的值
因此不建議手動設置dpr的值

切圖（這裏指的圖真的是圖，須要被縮放的）的時候，要放大1.5倍切，由於如今市面上也有很多像魅藍note這種超高清屏幕，devicePixelRatio已經達到3了，這個切圖保證在全部設備都清晰顯示。

做者：SuperSnail 連接：http://www.jianshu.com/p/84c5cb3a485a 來源：簡書著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

相關標籤/搜索

每日一句

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