border-1px($color)
position: relative
&:after
display: block
position: absolute
left: 0
bottom: 0
width: 100%
border-top: 1px solid $color
content: ' '
border-none()
&:after
display: none
@import "../../common/stylus/mixin.styl";@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)
注： 先定義乙個 mixin (mixin 是 css 預處理器提供的乙個方法，它可以通過定義乙個函式，比如 border-1px($color),在其中定義的css**，可以在其他css中直接通過呼叫函式來引用)
通過對偽類的縮放，來實現在不同螢幕下的1px 效果。
為了方便依賴所有的公共樣式，建立乙個 index.scss ，引入其他的公共scss,當應用到其他 css 時，直接引入index即可（@import "./index"）
* 解決1px問題
* 判斷在不同 dpr 下的顯示情況
*/@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
}}@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
}}/** * 等同於
注：@import 後面的 ';'不能省略，否則會報錯
移動端設定border的1px畫素解決方案
可能有人會問，設定邊框1px問題，直接 border 1px soild ccc 不就完事了，為什麼需要這麼麻煩？因為移動端的dpr裝置畫素比不同，直接設定會出現邊框加粗問題，親們可以自行測試，這裡不做過多闡述。下面直接上解決方案。1.為了方便通用，在base.scss檔案中 使用 mixin 定義...
手機1畫素線粗 實現移動端1畫素線 stylus
1px的邊框實現思路 給準備加1px的元素相對定位 給該元素加乙個偽元素，給偽元素乙個絕對定位 然後把元素的寬高按照dpr相對應的倍數等比例縮放。css3中的transfrom scale 下邊用stylus實現移動端的1畫素邊框 border border width 1px,border col...
手機實現1畫素邊框顯示
問題需求 頁面設定邊框1畫素時，電腦端顯示是正常的，手機端會顯示比正常粗一點。1 給需要顯示1畫素邊框的元素新增偽類元素，設定邊框為1px。注意 這個時候和直接在元素本身設定邊框是一樣的效果，達不到真正顯示1畫素的問題。2 然後用media 查詢，設定偽類元素的縮放比例。media only scr...