因為不同的裝置，不同的裝置畫素比（dpr）導致的。當我們在樣式中設定邊框寬度為 1px 時（這裡使用的是css畫素），裝置畫素比為2的裝置，會用4個物理畫素（dp）來渲染這個邊框；而裝置畫素比為1的裝置，會用1個物理畫素來渲染這個邊框，導致最終的視覺效果有差異。
stylus封裝
border_1px
(border-width =
1px, border-color = #ccc, border-style = solid, radius =0)
// 為邊框位置提供定位參考
position relative
border-radius radius
&::after
// 用以解決邊框layer遮蓋內容
pointer-events none
position absolute
z-index 999
top 0
left 0
content '\0020'
border-color border-color
border-style border-style
border-width border-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
)if(radius !=0)
border-radius radius *
1 @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)if
(radius !=0)
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)if
(radius !=0)
border-radius radius *
3 transform-origin 0
0
style中匯入
"stylus" scoped>
@import
'~@a/stylus/border.styl'
// 解決一畫素問題
div border_1px
(1px)
<
/style>
border_1px
(border-width =
1px, border-color = #ccc, border-style = solid, radius =
0)
引數名簡述
border-width
邊框線的寬度 預設為1px註解1
border-color
邊框線的顏色 預設為灰色
border-style
邊框線樣式 預設為實線
radius
邊框線的圓角弧度 預設0
註解1
@mixin border_1px
($color)
} @media
(-webkit-min-device-pixel-ratio:2)
,(min-device-pixel-ratio:2)
} @media
(-webkit-min-device-pixel-ratio:3)
,(min-device-pixel-ratio:3)
}}
@include border_1px
(rgb
(211
,208
,208))
;
border是乙個高階元件，這裡需要傳過來乙個元件，返回的是乙個設定完一畫素邊框的元件
border設定了一些預設屬性，color style width radius ，如果不傳值的話則會顯示預設的屬性
安裝yarn add styled-components -s
import styled from
"styled-components"
const
border
=(styledcomp)
=>
rem;
&::after
; border-style: $;
border-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)
rem;
}@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)
rem;
}@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)
rem;
}transform-origin: 0 0;}`
}export
default border
import styled from
'styled-components'
import border from
"../styled/border"
//匯入一畫素的封裝
//const searchcontainer=
border
(styled.div`
display:flex;
height:.44rem;
width:100%;
background:$;
align-items:center;
justify-content:center;
b`)export
width=
"1px"
color=
"#ee742f"
radius=
// background="#eee"
>
<
/search>
引數名簡述
width
邊框線的寬度 預設為1px註解1
color
邊框線的顏色 預設為灰色
style
邊框線樣式 預設為實線
radius
邊框線的圓角弧度 預設0
移動端一畫素邊框解決方案
如果你太明確邏輯畫素是什麼，可以先看看這篇介紹 如果你不太明確 css 變數的用法，可以看看阮一峰老師的教程 先上碼 border media screen and webkit min device pixel ratio 2 media screen and webkit min device ...
移動端布局一
首先先了解html中這一句話的含義 width viewport 的寬度 height viewport的高度 initial scale 初始的縮放比例 minimum scale 允許使用者縮放到的最小比例 maximum scale 允許使用者縮放到的最大比例 user scalable 使用...
移動端事件（一） 移動端事件和物件
在我們開始用原聲js寫移動端輪播前，我們先了解一些移動端的基礎。touch事件 touchevents物件 滑屏的思想與實現 移動端touch事件 let box document.queryselector box touchstart mousedown 手指觸碰元素 touchmove mou...