移动端1px解决方法

Posted 2020-10-20 mhxy13867806343

前端的同学想必都碰到过1px边框的问题，在高分屏手机上，我们会发现自己写的1px往往会比预想的“粗”一些，下面是他人总结的解决方案。

单线

写一个高度为1px的线，然后通过transform:scaleY(0.5)缩放来实现

1 div{
2     height:1px;
3     background:#ddd;
4     -webkit-transform: scaleY(0.5);
5     -webkit-transform-origin:0 0;
6     overflow: hidden;
7 }

边框+圆角

和上面的思路是一样的，也是通过放大后再缩小实现的，需要注意的是宽高以及圆角要设置为原来的2倍

 1 div{
 2     position: relative;
 3 }
 4 div:before{
 5     content: "";
 6     position: absolute;
 7     top: 0;
 8     left: 0;
 9     width: 200%;/* 宽高要放大 */
10     height: 200%;
11     border: solid 1px #ddd;
12     border-radius: 10px;/* 圆角要放大 */
13     overflow: hidden;
14     transform-origin: 0 0;
15     -webkit-transform-origin: 0 0;
16     transform: scale(0.5, 0.5);
17     -webkit-transform: scale(0.5, 0.5);
18 }

来源地址：

1px解决方法

参考链接：http://www.cnblogs.com/shuiyi/p/5568348.html