移动端布局(如何解决边框问题)

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;
}

 

移动端布局(如何解决边框问题)

上一篇:官宣 | 多多客小程序发布全插件化1.0版,插件市场正式上线


下一篇:Python+Appium学习篇之WebView处理