因為裝置畫素比不同，邊框的大小在不同的裝置上也不同
border-1px($color)
position: relative
&:after
display: block
position: absolute
left: 0
bottom: 0
width: 100%
border-bottom: 1px solid $color
content: ' '
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
.border-1px
&::after
-webkit-transform: scaley(0.7)
transform: scaley(0.7)
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
.border-1px
&::after
-webkit-transform: scaley(0.5)
transform: scaley(0.5)
由於最近用到的是stylus 語法上與style有些不同 各位可適當參考
移動端1px邊框解決方案
在retina屏中，畫素比為2 iphone6 7 8 或3 iphone6plus 7plus 8plus 1px的邊框看起來比真的1px更寬。元素本身不定義邊框，偽元素定義1px邊框，並且根據根據畫素比值設定縮放比例，畫素比為3時設定為0.33，畫素比為2時設定0.5。html css bord...
移動端 1px解決方案
var viewport document.queryselector meta name viewport var scale 1 window.devicepixelratio viewport.setattribute content width device width,initial sc...
移動端1px解決方案
lang en charset utf 8 name viewport content initial scale 1,maximum scale 1,minimum scale 1,user scalable no,width device width 移動端1px邊框問題title ul,li ...