因為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);
}
}
}
這是設備像素比媒體查詢的代碼
