移动web之一像素问题

原文链接： https://www.mk2048.com/blog/blog.php?id=h0kccabcca0j&title=%E7%A7%BB%E5%8A%A8web%E4%B9%8B%E4%B8%80%E5%83%8F%E7%B4%A0%E9%97%AE%E9%A2%98

一、为什么会有一像素问题

弄明白这个问题，首先要知道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。
二、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;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
}

/* 2倍屏 */
@media  (-webkit-min-device-pixel-ratio: 2.0),(min-device-pixel-ratio: 2.0){
    .border-bottom::before {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

/* 3倍屏 */
@media (-webkit-min-device-pixel-ratio: 3.0),(min-device-pixel-ratio: 3.0) {
    .border-bottom::before {
        -webkit-transform: scaleY(0.33);
        transform: scaleY(0.33);
    }
}

更多专业前端知识，请上【猿2048】www.mk2048.com

移动web之一像素问题

猜你喜欢