如果你太明確邏輯畫素是什麼,可以先看看這篇介紹
如果你不太明確 css 變數的用法,可以看看阮一峰老師的教程
先上碼:
.border
@media screen and (
-webkit-min-device-pixel-ratio
: 2) }
@media screen and (
-webkit-min-device-pixel-ratio
: 3)
}
顯然,問題已經解決,但是很麻煩。
下面是優化方案,但是要先弄明白上面的**是什麼意思。
html
@media screen and (
-webkit-min-device-pixel-ratio
: 2) }
@media screen and (
-webkit-min-device-pixel-ratio
: 3) }
.a.b
移動端1px邊框解決方案
在retina屏中,畫素比為2 iphone6 7 8 或3 iphone6plus 7plus 8plus 1px的邊框看起來比真的1px更寬。元素本身不定義邊框,偽元素定義1px邊框,並且根據根據畫素比值設定縮放比例,畫素比為3時設定為0.33,畫素比為2時設定0.5。html css bord...
移動端一畫素問題解決方案
在移動端解析度是不相同的,目前來說可以分一倍屏,二倍屏,三倍屏,在不同解析度上顯示的1畫素可能會被渲染為2個畫素點或者三個畫素點,這樣嚴重影響了美觀,所以我們要解決一畫素問題 html border div div css after裡面的width 200 height 200 就是把after元...
移動端1畫素邊框
通常我們會有偽類和定位來解決1畫素的問題,但是使用偽類也是有問題的,但是你可以換一種方式實現1畫素邊框的問題,box shadow 1.實現下邊框 box shadow inset 0 1px 0 0 000 2.實現右邊框 box shadow inset 1px 0 0 0 000 3.實現左邊...