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

时间：2018-10-24 22:27:09 阅读：264 评论：0 收藏：0 [点我收藏+]

标签：元素设备 dip ati 产生 device 模拟 scale transform

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

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

标签：元素设备 dip ati 产生 device 模拟 scale transform

原文地址：https://www.cnblogs.com/anziran/p/9845749.html

踩

(0)

评论一句话评论（0）