在移动端设备中，很多css设置为1像素的border实际屏幕显示为2px或者3px。这种情况是什么原因呢？
主要原因是css像素与物理像素的区别
首先说一个概念：dpr
dpr，即device pixel ratio——设备像素比
不同的设备具有不同的像素比，dpr决定了由设备的多少个物理像素显示web css的一个像素
比如dpr为2时，设备上由2个像素表现css上的一个像素
解决1px border问题
要想达到1px效果，只需要查询当前设备的dpr，再根据dpr进行缩放即可
纵轴缩放处理1px border代码：
@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;
height: 1px;
width: 100%;
//核心,1px/像素比
transform: scaleY(0.667);
}
}
@media(-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
&::before {
content: ' ';
position: absolute;
left:0px;
top: 0px;
background-color: $color;
height: 1px;
width: 100%;
//核心
transform: scaleY(0.5);
}
}
@media(-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
&::before{
content: ' ';
position: absolute;
left:0px;
top: 0px;
background-color: $color;
height: 1px;
width: 100%;
//核心
transform: scaleY(0.333);
}
}
}
