移動端一畫素邊框解決方案

2021-10-08 13:02:16 字數 548 閱讀 7661

如果你太明確邏輯畫素是什麼,可以先看看這篇介紹

如果你不太明確 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.實現左邊...