移動web之一像素問題

1、爲何會有一像素問題

弄明白這個問題，首先要知道DPR了。

　　DPR（device pixel ratio）pixel等於picture element。設備像素比，是默認縮放100%的狀況下，即DPR=設備像素個數/理想視口像素個數(device-width)。

　　1.設備像素：設備的物理像素，任何設備的物理像素都是固定不變的。

　　2.佈局視口：移動端css佈局所依據的視口，即css佈局是根據佈局視口來計算的。理想視口即爲理想的佈局視口。

拿iPhone6爲例，當咱們寫一像素線border-top：1px solid red;時，屏幕顯示的1px的紅線嗎？顯然不是。佈局視口是移動端咱們css佈局的依據視口，在咱們設置<meta name="viewport" content="width:device-width">時就將佈局視口設置爲理想視口了。iPhone6的DPR=2，所以在屏幕上顯示的實際上是2px的紅線。有人說，那咱們寫css佈局時寫border-top:0.5 solid red;不就完了嗎。想法很好，可是計算機會將0.5計算成1。
2、transform:scale

這裏的解決辦法是對這條線進行縮放，使用僞元素::before或者::after來實現一像素邊框，再利用@media適配不一樣的設備像素比，來肯定縮放比例。

 

.border-top {
    position: relative;
}
.border-top::before {
    position: absolute;
    top: 0;
    left: 0;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #e4e4e4;
}

/* 2倍屏 */
@media  (min-resolution: 2dppx){  // 設備像素比 -webkit-min-device-pixel-ratio 不是標準的css特性，推薦使用分辨率特性resolution
    .border-top::before {
        transform: scaleY(0.5);
    }
}

/* 3倍屏 */
@media (min-resolution: 3dppx) {
    .border-top::before {
        transform: scaleY(0.33);
    }
}