retina屏 適配問題

物理像素(physical pixel)

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

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

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

因此說，物理像素和設備獨立像素之間存在着必定的對應關係，這就是接下來要說的設備像素比。

設備像素比(device pixel ratio )

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

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

在javascript中，能夠經過window.devicePixelRatio獲取到當前設備的dpr。

在css中，能夠經過-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio進行媒體查詢，對不一樣dpr的設備，作一些樣式適配(這裏只針對webkit內核的瀏覽器和webview)。

設計稿

　　以設計稿750*1334爲基準

retina屏精度顯示問題

　　retina屏的高清是由於他在一樣的寬高下容納了比其餘類型屏幕更多的像素點，這會致使1px問題，明明css聲明的是1px，可是由於retin屏像素比是2或者3，因此1px最終被渲染成了2px或者3px

移動端適配問題

　　移動端屏幕寬度有大有小，如何在不一樣屏幕上顯示相同的效果，假如須要一個div充滿全屏，在不設定百分比的狀況下，如何實現？

rem em px選擇

　　rem是根據html根元素的font-size來設定大小，em是根據父元素的font-size來設定大小，px表明的是css像素，在設備像素比爲1的時候px還能夠對應真實比率爲1，若是縮放比爲2，那麼對應的就是2了，在移動端這三個單位如何選擇

解答：

　　先說移動端適配問題

　　　　無retina屏幕的適配：無retina屏幕意味着設備像素比都是1，因此只須要考慮如何讓一個div撐滿全屏的設定在任意屏幕均可以實現，由於rem表明的長度是根據html根元素的dont-size來設定的，因此咱們是否能夠根據不一樣屏幕的大小來設定不一樣的font-size值，好比 在750px的屏幕上設置font-size爲100px，這樣1rem=100px，因此7.5rem就等於750px，在寬度爲375px的屏幕上若是也但願寫7.5rem實現全屏，只須要設置font-size爲50px就能夠了，7.5*50=375px，因此咱們在js中獲取設備寬度，而後設置documentdocumentEletnt.fontSize  = deviceWidth/7.5;

　　　　retina屏幕適配：retina屏幕在於設備像素比是2或者3，這意味這一樣1px在實際表現多是2px或者3px，但幸虧這不會影響咱們的的font-size的設定規則，因此這塊不作改動

　　retina屏精度顯示問題：在retina屏幕上一個像素點比普通屏幕多了三個像素點，這會致使兩個問題，

　　　　1:1px會有變粗的效果

　　　　2:圖片顯示精度問題，原本是一個200*200圖片，把它放入其實是400*400的像素區域裏，顯示確定會有問題

　　　　對於1px的解決方案是能夠設置先設置border爲1px，而後經過-webkit-device-pixel-ratio獲取設備像素比，若是像素比是3，咱們設置元素的大小爲正常的三倍，而後經過scale將元素縮小3倍，可獲得1px的邊框，若是畫一條單獨的1px的線段，能夠設置高度爲1px，而後縮小3倍

　　　　對於圖片顯示精度問題，雖然css上面顯示區域是200*200，可是實際像素顯示大小爲400*400，因此這裏咱們應該聽過400*400的圖片，能夠在css裏面拿到設備像素比，根據不一樣像素比加載不一樣大小的圖片

　　　　關於rem em px的選擇問題：

　　　　　　咱們在上面解決移動端適配的時候選擇了rem，可是字體要不要使用rem呢，舉一個極端例子，咱們經過font-size動態設置rem對應的px，若是在一個很是很是狹窄的屏幕上（屏幕寬度爲50px），那麼1rem=50/7.5=6.6px，當咱們在750px的設計稿拿到字體大小是20px的時候，咱們也許會把字體大小設置爲0.2rem，最終在這個50px的屏幕上咱們會看到多大的字體呢，就是0.2*6.6=1.32px，這確定不是咱們但願看到的結果，因此對於字體而言咱們使用em來另外控制，經過在body控制body的font-size，達到不一樣屏幕下協調的字體大小設置：

　　　　

@media screen and (max-width: 321px) {
    body {
        font-size:16px
    }
}

@media screen and (min-width: 321px) and (max-width:400px) {
    body {
        font-size:17px
    }
}

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

　　關於canvas繪圖在retina屏幕顯示精度問題：

　　　　一樣canvas使用的css像素單位繪製了圖像，本意是但願繪製200*200的圖像，可是由於其200*200的圖像繪製在了retina400*400的像素區域裏面確定會有問題，這個時候能夠放大canvas的繪圖區域至二倍，即設置canvas標籤的width和height屬性爲正常的2倍（若是設備像素比爲3，則設置爲3倍），而後在css裏面在設置canvas的寬度爲原來大小，好比咱們的canvas是想繪製在200*200px的區域內，咱們在css裏設置canvas爲width:200px;height:200px,而後設置<canvas width="400" height="400"></canvas>