（1）物理畫素(physical pixel)
物理畫素又被稱為裝置畫素（device pixel簡稱dp）他是顯示裝置中乙個最微小的物理部件。
乙個裝置的物理畫素是固定不變的。
螢幕畫素密度ppi
螢幕畫素密度ppi（pixel per inch）
螢幕畫素密度(ppi)是指乙個裝置表面上存在的畫素數量，它通常以每英吋有多少畫素來計算。螢幕畫素密度與螢幕尺寸和螢幕解析度有關，在單一變化條件下，螢幕尺寸越小、解析度越高。
單位：dpi（dots per inch，每英吋點數）
計算：螢幕畫素密度(ppi) = 對角線解析度 / 對角線尺寸
在移動端web開發中，ui設計稿中設定邊框為1畫素，前端在開發過程中如果出現border:1px，測試會發現在某些機型上，1px會比較粗，即是較經典的 移動端1px畫素問題。
解決1px問題的方案有很多種，接下來依次對比分析下。
①**查詢
②設定 border-image
③利用box-shadow陰影
④transform: scale(0.5)
⑤**查詢 + transfrom
（1） **查詢
利用裝置畫素比縮放，設定小數畫素；css與js寫法任選其一
優點：簡單，好理解
缺點：相容性差，目前之餘ios8+才支援，在ios7及其以下、安卓系統都是顯示0px。
（2）設定 border-image 方案
在使用border-image時，將border設計為物理1px
border-width：指定邊框的寬度，可以設定四個值，分別為上右下左border-width: top right bottom left。
（3）利用box-shadow陰影也可以實現
box-shadow屬性的用法：box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset]
引數分別表示: 水平陰影位置，垂直陰影位置，模糊距離， 陰影尺寸，陰影顏色，將外部陰影改為內部陰影，後四個可選。
優點：沒有圓角問題
缺點：顏色不好控制
transform方案
（4）transform: scale(0.5) 方案 - 推薦: 很靈活
核心思想是使用transform的scale來整體縮放，如果你想畫一條1px的線，就可以直接用
理論上在dpr為2時就是scaley(0.5)，在dpr為3時就是scaley(0.333)，但是通常並沒有針對其他dpr的做特殊處理。
因為在iphone6（dpr=2）和iphone6 plus（dpr=3）中看起來差別不大。
如果你想給乙個元素加乙個1px的邊框可以利用到偽元素，在這個方案下邊框加圓角也很容易實現
優點：可以實現圓角，京東就是這麼實現的
**查詢 + transfrom
（5）**查詢 + transfrom 對方案1的優化
移動端1px實現
新增css 1px邊框時，在手機上顯示為粗線，解決辦法就是利用偽類設定1px邊框，然後根據裝置畫素比進行y軸的縮放，使其表現為真正的1px.stylus的語法 1.定義乙個函式。找到要加1px的標籤，新增定位和偽類。border 1px color position relative after d...
移動端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...