问题原因
目前主流的屏幕DPR=2 (iPhone 678),或者3 (iPhone 8 Plus)。拿2倍屏来说,设备的物理像素要实现1像素,而DPR=2,所以css 像素只能是 0.5。一般设计稿是按照750来设计的,它上面的1px是以750来参照的,而我们写css样式是以设备375为参照的,所以我们应该写的0.5px就好了啊! 试过了就知道,iOS 8+系统支持,安卓系统不支持。
解决方案
以DPR=2为例,使用scale缩放解决
.border-all-1px {
position: relative;
&::after {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: left top;
box-sizing: border-box;
border: 1px solid red;
border-radius: 4px;
}
}
.border-top-1px {
position: relative;
&::after {
position: absolute;
content: "";
background-color: red;
display: block;
width: 100%;
height: 1px; /*no*/
transform: scale(1, 0.5);
top: 0;
left: 0;
}
}
.border-right-1px {
position: relative;
&::after {
position: absolute;
content: "";
background-color: red;
display: block;
height: 100%;
width: 1px; /*no*/
transform: scale(0.5, 1);
top: 0;
right: 0;
}
}
.border-left-1px {
position: relative;
&::after {
position: absolute;
content: "";
background-color: red;
display: block;
height: 100%;
width: 1px; /*no*/
transform: scale(0.5, 1);
top: 0;
left: 0;
}
}
.border-bottom-1px {
position: relative;
&::after {
position: absolute;
content: "";
background-color: red;
display: block;
width: 100%;
height: 1px; /*no*/
transform: scale(1, 0.5);
bottom: 0;
left: 0;
}
}