之前有學習過這個問題，但是一時之間沒想起來。（其實就是沒有徹底弄懂，不然怎麼會想不起來呢）
物理畫素：裝置螢幕實際擁有的畫素點。比如iphone 6的螢幕在寬度方向有750個畫素點，高度方向有1334個畫素點，所以iphone 6 總共有750*1334個物理畫素。
邏輯畫素：邏輯畫素是乙個抽象概念，是乙個裝置設定的css畫素值，比如iphone 6的螢幕在寬度方向邏輯畫素值為375px。
對於iphone 6來說，相當於是2*2個物理畫素點去渲染1個邏輯畫素（1px）
這樣：
使得顯示網頁更為精細，更少的顆粒感。
物理畫素和邏輯畫素的比值為裝置畫素比(dpr) ，是指在移動開發中1個css畫素占用多少裝置畫素，如2代表1個css畫素用2x2個裝置畫素來繪製。
以iphone6為例，如果是750px的設計稿，有1px的邊框，那麼由於iphone6的css寬度為375px，在rem等比例轉換的情形下，可以認為是border: 0.5px，但是瀏覽器可能會存在四捨五入的情形。。所以顯示的border寬度可能會隨緣？？？
針對這種情形，可以設定邊框border: 1px，iphone6裡面border會變成螢幕寬度的1/375，但是設計圖的border寬度為螢幕寬度的1/750，這樣會使得iphone6中的邊框變粗。所以可以訪問裝置的device pixel ratio(裝置畫素比)來等比例縮小，使得border寬度永遠是裝置寬度的1/750。
可以使用外掛程式postcss去解決這個問題。
1px問題 詳解
當你給乙個div這樣的css樣式後 邊框寬度為1px border height 50px width 50px margin 0 auto background pink margin top 20px border 1px solid red 在手機發現 哎，怎麼有點粗 這就是經典的1px問題，...
移動端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...