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)
}
.border-image-1px.shadow在devicepixelratio=3設定meta
這個方案也是weui正在用的，核心思想是使用transform的scale來整體縮放，如果你想畫一條1px的線，就可以直接用
div如果你想給乙個元素加乙個1px的邊框可以利用到偽元素，在這個方案下邊框加圓角也很容易實現，具體**如下：
div:after裝置畫素：顯示螢幕的最小物理單位，每個dp包含自己的顏色、高寬等，不可再細分。裝置畫素是在裝置出廠是設定的，裝置一旦造出來就不會變大小和數量。官方在產品說明書上寫的1920x1080就是說的物理畫素。
2.dpi
裝置畫素：顯示螢幕的最小物理單位，每個dp包含自己的顏色、高寬等，不可再細分。裝置畫素是在裝置出廠是設定的，裝置一旦造出來就不會變大小和數量。官方在產品說明書上寫的1920x1080就是說的物理畫素。
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要粗即1培訓1px 1px 裝置畫素比dpr 裝置畫素 css畫素 某一方向上 當dpr為2時1px實際為2px iphone6 dpr為3時1px為3px inphoex 所有看起來1px就會變粗 ios8下已經支援帶小數的px值...
移動端1px問題
在高清屏下，移動端的1px 會很粗。那麼為什麼會產生這個問題呢？主要是跟乙個東西有關，dpr devicepixelratio 裝置畫素比，它是預設縮放為100 的情況下，裝置畫素和css畫素的比值。window.devicepixelratio 物理畫素 css畫素目前主流的螢幕dpr 2 iph...
移動端1px 的產生和解決方法
已iphone為準 物理畫素 裝置畫素 750pt，設計師設計的寬度，就是螢幕的解析度，出廠就定了的。我們看到的是螢幕 邏輯畫素 css畫素 375px 螢幕的寬度 裝置畫素比 dpr 是指在移動開發中1個css畫素占用多少裝置畫素，如2代表1個css畫素用2個裝置畫素來繪製。設計圖上的1px如果當...