因为retina视网膜屏幕的大量使用，使移动端产生了1px问题。设备像素比由原本的1变为1.5/2甚至是现在的3，都使移动端布局产生了更多的问题。
1. 物理像素和独立像素
大白话讲，一个物理像素就是一个发光的小灯泡；独立像素就是一个正常像素面积的大小，原本来说，一个独立像素只有一个发光的小灯泡，但是，随着苹果推出retina视网膜屏幕，使的原本一个独立像素面积的地方放了更多的小灯泡。
2. 设备像素比
设备像素比=物理像素/独立像素；也就是一个独立独立像素平均放置小灯泡的个数。如果你的iphone设备像素比为2的话，那么在一个独立像素的面积下就放置了两小灯泡。
3.带来的问题
问题就是：当我们在CSS代码里写border:1px;时，它实际上写的是一个物理像素，而在设备像素比为2的设备上，它显示的是2px。那么，如何让它在设备像素比不为1的设备上正常显示1像素呢？
4. 解决方案
这个1px边框的显示，用一个div伪类来代替，再用媒体查询设备像素比的方法，使用transform:scaleY(0.5)；来缩放（此处假设设备像素比为2）。
核心代码如下：
@mixin border-1px($color: rgba(7,17,27,0.2)){
position:relative;
&:after{
display:block;
position:absolute;
left:0;
bottom:0;
content:'';
width:100%;
border-top:1px solid $color;
}
}
以上是伪类的mixin
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){
.border-1px {
&:after {
-webkit-transform: scaleY(0.7);
-moz-transform: scaleY(0.7);
-ms-transform: scaleY(0.7);
-o-transform: scaleY(0.7);
transform: scaleY(0.7);
}
}
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
.border-1px {
&:after {
-webkit-transform: scaleY(0.5);
-moz-transform: scaleY(0.5);
-ms-transform: scaleY(0.5);
-o-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
}
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
.border-1px {
&:after {
-webkit-transform: scaleY(0.3);
-moz-transform: scaleY(0.3);
-ms-transform: scaleY(0.3);
-o-transform: scaleY(0.3);
transform: scaleY(0.3);
}
}
}
这是设备像素比媒体查询的代码
