1像素问题(移动端适配,设备像素比问题)
原因:不同的设备,不同的像素比(dpr)
第一步:单独建一个scss文件,来写重复的样式
@mixin border_1px($color) {
position: relative;
//判断设备的像素比
@media(-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){
/* 伪元素 */
&::before{
content: “”;
position:absolute;
left: 0px;
top: 0px;
background-color: $color;
transform: scaleY(0.75);
height:1px;
width: 100%;
}
}
@media(-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
/* 伪元素 */
&::before{
content: "";
position:absolute;
left: 0px;
top: 0px;
background-color: $color;
transform: scaleY(0.5);
height:1px;
width: 100%;
}
}
@media(-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){
/* 伪元素 */
&::before{
content: "";
position:absolute;
left: 0px;
top: 0px;
background-color: $color;
transform: scaleY(0.333);
height:1px;
width: 100%;
}
}
}
第二步,然后通过@include放到你需要的地方调用它
.item{
display: flex;
padding: 0.15rem;
@include border_1px(#e8e8e8);
img{
height: 0.6rem;
width: 0.6rem;
}