1px原理篇
在講原理之前，先跟大家說一個(gè)概念，就是設(shè)備像素比DPR(devicePixelRatio)是什么
DPR = 設(shè)備像素 / CSS像素(某一方向上)
這句話看起來很難理解，可以結(jié)合下面這張圖（1px在各個(gè)DPR上面的展示），一般我們h5拿到的設(shè)計(jì)稿都是750px的，但是如果在DPR為2的屏幕上，手機(jī)的最小像素卻是要用2 * 2px來進(jìn)行繪制，這也就導(dǎo)致了為什么1px會(huì)比較粗了。
解決方法
解決辦法有很多種，在這里幫大家比較下方案：
| 方案 | 優(yōu)點(diǎn) | 缺點(diǎn) |
|---|---|---|
| 使用0.5px實(shí)現(xiàn) | 代碼簡單，使用css即可 | IOS及Android老設(shè)備不支持 |
| 使用border-image實(shí)現(xiàn) | 兼容目前所有機(jī)型 | 修改顏色不方便 |
| 通過 viewport + rem 實(shí)現(xiàn) | 一套代碼，所有頁面 | 和0.5px一樣，機(jī)型不兼容 |
| 使用偽類 + transform實(shí)現(xiàn) | 兼容所有機(jī)型 | 不支持圓角 |
| box-shadow模擬邊框?qū)崿F(xiàn) | 兼容所有機(jī)型 | box-shadow不在盒子模型，需要注意預(yù)留位置 |
使用偽類 + transform實(shí)現(xiàn)
// 左邊框，如果需要修改邊框位置，可以修改元素top，left，right，bottom的值即可
&::before {
position: absolute;
top: 0;
left: 0;
content: '\0020';
width: 100%;
height: 1px;
border-top: 1px solid #E9E9E9;
transform-origin: 0 0;
overflow: hidden;
}
@media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49) {
&::before {
transform: scaleY(0.5);
}
}
@media (-webkit-min-device-pixel-ratio: 2.5) {
&::before {
transform: scaleY(0.33333);
}
}
