由於解析度 dpi 的差異，高畫質手機屏上的 1px 實際上是由 2×2 個畫素點來渲染，有的螢幕甚至用到了 3×3 個畫素點
所以 border: 1px 在移動端會渲染為 2px 的邊框
與設計圖產生差異，並且沒有那麼美觀。
兩種解決方法：
一、transform:scale
使用偽類 :after 或者 :before 建立 1px 的邊框，然後通過 media 適配不同的裝置畫素比，然後調整縮放比例，從而實現一畫素邊框
首先用偽類建立邊框
.border-bottom.border-bottom::after
然後通過**查詢來適配
/*1.5倍屏
*/@media only screen and (-webkit-min-device-pixel-ratio: 1.5) }
/*2倍屏
*/@media only screen and (-webkit-min-device-pixel-ratio: 2.0) }
/*3倍屏
*/@media only screen and (-webkit-min-device-pixel-ratio: 3.0) }
這種辦法的邊框並不是真正的 border，而是高度或者寬度為 1px 的塊狀模型，所以這種辦法不能做出圓角，一般都用來畫分割線。
二、viewport
網頁的內容都渲染在 viewport 上，所以裝置畫素比的差異，直接影響的也是 viewport 的大小
通過 js 獲取到裝置畫素比，然後動態新增 標籤
移動端1px邊框實現
一看上篇博文的發布日期，就知道自己好久沒有寫技術文章了。一是可能工作比較忙，二是可能自己也比較懶散啦。今天重新敲起鍵盤。來跟大家分享乙個最近新學到的技術。一是為鞏固自己的掌握程度。也希望能幫到有需要的同學。大神看到的話可以提點意見。幫助小弟更快的成長。好了正文從這開始 如何實現在移動裝置下1畫素的邊...
實現移動端1px邊框
最近學了一下vue的實戰課程，學習到了其中的乙個頁面設計技巧，覺得深有感觸，於是便寫個部落格記錄下來，以便下次查閱 專案中是通過vue stylus來實現的，那麼首先需要說一下實現原理，因為在移動端中物理畫素是裝置畫素的兩倍，那麼以平時在pc端中設計的1px 在移動端裝置中就是2px了，那麼，我們要...
移動端1px邊框實現
手機端實現真正的一畫素邊框 border 1px,border bottom 1px,border top 1px,border left 1px,border right 1px 線條顏色 黑色 border 1px after,border bottom 1px after,border top...