移動端一畫素問題解決方案

在移動端解析度是不相同的,目前來說可以分一倍屏,二倍屏,三倍屏,在不同解析度上顯示的1畫素可能會被渲染為2個畫素點或者三個畫素點,這樣嚴重影響了美觀,所以我們要解決一畫素問題

html

="border"

>
<
/div>
<
/div>css ::after裡面的width:200%;height:200%就是把after元素放大兩倍,原來的邊框畫素還是1px原來的大小,再用tranform:translate(.5)是把元素壓縮,原來的1px還是1px,但是被壓縮成一半的大小了,所以看起來系了(這裡是拿dpx為2做的例子)
.border 
.border:
:after 

device-pixel-ratio(裝置畫素比) 物理畫素與邏輯畫素比

$border

(width =
0, color = #ccc, style = solid, radius =0)
position relative
border-radius radius
&::after
pointer-events none
position absolute
z-index 999
top 0
left 0
content ""
border-color color
border-style style
border-width width
@media
(max--moz-device-pixel-ratio:
1.49),
(-webkit-max-device-pixel-ratio:
1.49),
(max-device-pixel-ratio:
1.49),
(max-resolution:
143dpi)
,(max-resolution:
1.49***x)
width 100
% height 100
% transform scale(1
) border-radius radius
@media
(min--moz-device-pixel-ratio:
1.5)
and(max--moz-device-pixel-ratio:
2.49),
(-webkit-min-device-pixel-ratio:
1.5)
and(
-webkit-max-device-pixel-ratio:
2.49),
(min-device-pixel-ratio:
1.5)
and(max-device-pixel-ratio:
2.49),
(min-resolution:
144dpi)
and(max-resolution:
239dpi)
,(min-resolution:
1.5***x)
and(max-resolution:
2.49***x)
width 200
% height 200
% transform scale
(0.5
) border-radius radius *
2 @media
(min--moz-device-pixel-ratio:
2.5),(
-webkit-min-device-pixel-ratio:
2.5)
,(min-device-pixel-ratio:
2.5)
,(min-resolution:
240dpi)
,(min-resolution:
2.5***x)
width 300
% height 300
% transform scale
(0.3333333
) border-radius radius *
3 transform-origin 0
0

css獲取dpr方法:

max-device-pixel-ratio 小於等於1.49 dpr為1

(max–moz-device-pixel-ratio: 1.49),

(-webkit-max-device-pixel-ratio: 1.49),

(max-device-pixel-ratio: 1.49),

大於等於 min-device-pixel-ratio: 1.5並且小於等於max-device-pixel-ratio: 2.49 dpr為2

(min–moz-device-pixel-ratio: 1.5) and (max–moz-device-pixel-ratio: 2.49),

(-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),

(min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),

大於等於 min-device-pixel-ratio: 3.5 dpr為3

(min–moz-device-pixel-ratio: 2.5),

(-webkit-min-device-pixel-ratio: 2.5),

(min-device-pixel-ratio: 2.5),

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

如果你太明確邏輯畫素是什麼，可以先看看這篇介紹 如果你不太明確 css 變數的用法，可以看看阮一峰老師的教程 先上碼 border media screen and webkit min device pixel ratio 2 media screen and webkit min device ...

移動端頁面滾動穿透問題解決方案

最近在做移動專案時遇到乙個頁面滾動穿透問題，具體場景是這樣的，在乙個可滾動的列表頁中開啟彈窗，底部的頁面理論上是不可滾動的，但是當滑動彈窗時，底部頁面會跟隨滾動，這就是所謂的頁面滾動穿透的問題。這個是比較常見的問題，基本都會遇到，google一下出解決方案也是挺多的。以下根據不同的適用場景總結一些解...

Vue React解決移動端一畫素問題的封裝

因為不同的裝置，不同的裝置畫素比 dpr 導致的。當我們在樣式中設定邊框寬度為 1px 時 這裡使用的是css畫素 裝置畫素比為2的裝置，會用4個物理畫素 dp 來渲染這個邊框 而裝置畫素比為1的裝置，會用1個物理畫素來渲染這個邊框，導致最終的視覺效果有差異。stylus封裝 border 1px ...