适配移动端1像素边框
a.直接切图解决
b.实现适配移动端1px边框,主要是根据设备的dpr来对边框进行缩放处理,CSS写法如下:
.border-1px{ position: relative;}.border-1px::after{ display: block; position: absolute; left: 0; bottom: 0; width: 100%; border-bottom: 1px solid rgb(217,217,217); content: " ";}@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) { .border-1px::after { -webkit-transform: scaleY(0.7); transform: scaleY(0.7); }}@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) { .border-1px::after { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); }} |
声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。
- 上一篇: 解决移动端的一像素问题
- 下一篇: 解决两个并列的input在一块存在8像素的空隙的情况