在移動端實現一畫素邊框

由於解析度 dpi 的差異，高畫質手機屏上的 1px 實際上是由 2×2 個畫素點來渲染，有的螢幕甚至用到了 3×3 個畫素點

所以 border: 1px 在移動端會渲染為 2px 的邊框

雖然使用者在實際使用的時候，很難發現這 1px 的差異，但是設計師往往會在這 1px 上較勁，這就產生了經典的 「一畫素問題」

最簡單的解決辦法，就是用做邊框，只是修改顏色不太方便。除此之外，還有兩種常用的辦法

一、transform:scale

使用偽類 :after 或者 :before 建立 1px 的邊框，然後通過 media 適配不同的裝置畫素比，然後調整縮放比例，從而實現一畫素邊框

首先用偽類建立邊框

.border-bottom.border-bottom::after

然後通過**查詢來適配

/*

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 獲取到裝置畫素比，然後動態新增 標籤

移動端1畫素邊框

通常我們會有偽類和定位來解決1畫素的問題，但是使用偽類也是有問題的，但是你可以換一種方式實現1畫素邊框的問題，box shadow 1.實現下邊框 box shadow inset 0 1px 0 0 000 2.實現右邊框 box shadow inset 1px 0 0 0 000 3.實現左邊...

移動端一畫素邊框解決方案

如果你太明確邏輯畫素是什麼，可以先看看這篇介紹 如果你不太明確 css 變數的用法，可以看看阮一峰老師的教程 先上碼 border media screen and webkit min device pixel ratio 2 media screen and webkit min device ...

在移動端實現1px的邊框

由於解析度 dpi 的差異，高畫質手機屏上的 1px 實際上是由 2 2 個畫素點來渲染，有的螢幕甚至用到了 3 3 個畫素點 所以 border 1px 在移動端會渲染為 2px 的邊框 與設計圖產生差異，並且沒有那麼美觀。兩種解決方法 一 transform scale 使用偽類 after 或...