問題需求：頁面設定邊框1畫素時，電腦端顯示是正常的，手機端會顯示比正常粗一點。
1、給需要顯示1畫素邊框的元素新增偽類元素，設定邊框為1px。注意：這個時候和直接在元素本身設定邊框是一樣的效果，達不到真正顯示1畫素的問題。
2、然後用media **查詢，設定偽類元素的縮放比例。
@media
only screen and
(-webkit
-min
-device
-pixel
-ratio
:1.5
),only screen and
(min
-device
-pixel
-ratio
:1.5
)
}
@media
only screen and
(-webkit
-min
-device
-pixel
-ratio:2
),only screen and
(min
-device
-pixel
-ratio:2
)
}
3、完整示例
html
<
div
class
="tab border-1px"
>
div>
css
.tab
.tab
:after
base
.css
@media
only screen and
(-webkit
-min
-device
-pixel
-ratio
:1.5
),only screen and
(min
-device
-pixel
-ratio
:1.5
)
}
@media
only screen and
(-webkit
-min
-device
-pixel
-ratio:2
),only screen and
(min
-device
-pixel
-ratio:2
)
}
css 解決手機端1畫素邊框問題
手機端 1畫素邊框解決方案 include border 0 0 0 1px,solid,red,4px module 背景與邊框 description 為元素新增邊框 包括1px邊框 method border version 2.0.0 param border width 指定邊框厚度 單位...
七 設定1畫素邊框的顯示顏色
1.引入1畫素邊框的css檔案 border.css charset utf 8 border,border top,border right,border bottom,border left,border topbottom,border rightleft,border topleft,bor...
移動端1畫素邊框
通常我們會有偽類和定位來解決1畫素的問題，但是使用偽類也是有問題的，但是你可以換一種方式實現1畫素邊框的問題，box shadow 1.實現下邊框 box shadow inset 0 1px 0 0 000 2.實現右邊框 box shadow inset 1px 0 0 0 000 3.實現左邊...