移動端1px問題解決方法

ui設計師設計的時候，畫的1px(真實畫素)實際上是0.5px(css)的線或者邊框。但是他不這麼認為，他認為他畫的就是1px的線，因為他畫的稿的尺寸本身就是螢幕尺寸的2倍。假設手機視網膜屏的寬度是320x480寬，但實際尺寸是640x960寬，設計師設計圖的時候一定是按照640x960設計的。但是前端工程師寫**的時候，所有css都是按照320x480寫的，寫1px(css)，瀏覽器自動變成2px(真實畫素)。

那麼前端工程師為什麼不能直接寫0.5px(css)呢？因為在老版本的系統裡寫0.5px(css)的話，會被瀏覽器解讀為0px(css)，就沒有邊框了。所以只能寫成1px(css)，實際在螢幕上顯示出來就是設計師畫的1px(真實畫素)的2倍那麼寬，所以設計師會覺得這個線太粗了，和他的設計稿不一樣。在新版的系統裡，已經開始逐漸支援0.5px(css)這種寫法。所以如果設計師在大圖上設計了乙個1px(真實畫素)的線的話，前端工程師直接除以2，寫0.5px(css)就好了。

div 
@media (-webkit-min-device-pixel-ratio: 2) 
}

缺點：相容性差，目前只有ios8+才支援，在ios7及其以下、安卓系統都是顯示0px。

.border-image-1px

.shadow

在devicepixelratio=2設定meta

在devicepixelratio=3設定meta

這個方案也是weui正在用的，核心思想是使用transform的scale來整體縮放，如果你想畫一條1px的線，就可以直接用

div

理論上在dpr為2時就是scaley(0.5)，在dpr為3時就是scaley(0.333)，但是我注意到weui並沒有針對其他dpr的做特殊處理，可能是因為在iphone6（dpr=2）和iphone6 plus（dpr=3）中看起來差別不大吧

如果你想給乙個元素加乙個1px的邊框可以利用到偽元素，在這個方案下邊框加圓角也很容易實現，具體**如下：

div:after

建議採用transform和偽類1.device pixels

裝置畫素：顯示螢幕的最小物理單位，每個dp包含自己的顏色、高寬等，不可再細分。裝置畫素是在裝置出廠是設定的，裝置一旦造出來就不會變大小和數量。官方在產品說明書上寫的1920x1080就是說的物理畫素。

2.dpi

3.dpr

裝置畫素比dpr = 裝置畫素 / css畫素(某一方向上)

可以通過window.devicepixelratio獲取裝置的dpr值。一般來說，在桌面的瀏覽器中，裝置畫素比（dpr）等於1，乙個css畫素就是代表的乙個物理畫素。而在移動端，大多數機型都不是為1，其中iphone的dpr普遍是2和3，那麼乙個css畫素不再是對應乙個物理畫素，而是2個和3個物理畫素。即我們通常在css中設定的width：1px，對應的便是物理畫素中的2px。手機機型不同，dpr可能不同。

以iphone5為例，iphone5的css畫素為320px568px，dpr是2，所以其裝置畫素為640px1136px

640(px) / 320(px)  = 2
1136(px) / 568(px) = 2
640(px)*1136(px) /  320(px)*568(px) = 4

移動端1px問題解決方法

移動端1px問題

移動端1px問題

移動端1px 的產生和解決方法

相關推薦