移动端布局（如何解决边框问题）

Posted 2021-01-15 anziran

1.产生这个问题的原因。

          在移动端中，1px和pc端中是不一样的。这是因为window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例问题导致的。

2.解决方案：

　　　1）.用box-shadow模拟边框

　　　　

doc{  
    box-shadow: 0 -.5px 0 0;
}

　　　2）.用after伪元素实现

　　　　方案一

doc{
        position:relative;
}
doc::after{
        content:‘‘;
        height:1px;
        transform:scaleY(.5);
        position:absolute;
        top:0;
        left:0;
        right:0;
        background:#000;
}

　　　　方案二

doc{
        position:relative;
}
doc::after{
        content:‘‘;
        height:.5px;
        position:absolute;
        top:0;
        left:0;
        right:0;
        background:#000;
}