移动端如何实现1px细线的方法

在移动端中，宽度100%，1px的线看起来要比pc端中宽度100%，1px的线粗，

那是因为css中的1px并不等于移动设备（物理像素）的1px。物理像素显示是1个像素代表2个像素，所以出现为2px

所以我们在移动端中为了让1px的线“看起来”苗条些，会采用一些手段。

解决办法

实现1px的线

方法一：transform

在移动端中，我们对宽度100%，1px的线进行改造，将其宽度设为200%，高度不变，之后使用transform对其缩放50%。

.line{      
    width:200% ;
    height:1px ;
    transform:scale(.5) ;
    -ms-transform:scale(.5) ;
    -o-transform:scale(.5) ;
    -webkit-transform:scale(.5) ;
    -moz-transform:scale(.5) ;
    transform-origin:top left ;         
}

这样苗条的线就出现了！

实现1px的边框

方法一：伪类 + transform

原始border：去掉border，设置相对定位

新border：设置 :before 或者 :after 重做 border ，并使用 transform 的 scale 缩小一半，设置绝对定位

.scale-1px{
　　position: relative;
　　width:100px;
　　height:100px;
　　border:none;
}
.scale-1px:after{
　　content: '';
　　position: absolute;
　　top: 0;
　　left: 0;
　　border: 1px solid #000;
　　-webkit-box-sizing: border-box;
　　box-sizing: border-box;
　　width: 200%;
　　height: 200%;
　　-webkit-transform: scale(0.5);
　　transform: scale(0.5);
　　-webkit-transform-origin: left top;
　　transform-origin: left top;}

优点：

所有场景都能满足

支持圆角(伪类和本体类都需要加border-radius)

缺点：

对于已经使用伪类的元素(例如clearfix)，可能需要多层嵌套

方法二：-webkit-min-device-pixel-ratio + 媒体查询

media query对应devicePixelRatio有个查询值-webkit-min-device-pixel-ratio, css可以写成这样
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.333333px solid #999 }
}

缺点:

安卓与低版本IOS不适用

实现边框宽度为1px，宽高各为父元素

方法一：伪类 + transform

.box1 {
            position: relative;
            border: none;
            height: 100px;
            width: 100px;
            text-align: center;
        }
.box1 div::after {
            content: '';
            border:solid 1px aqua;
            position: absolute;
            left: -50%;
            top: -50%;
            bottom: -50%;
            right: -50%;
            -webkit-transform: scale(.5);
            transform: scale(.5);
            box-sizing: border-box;
        }

<div class="box1">
        <div></div>
</div>

以上就是移动端如何实现1px细线的方法的详细内容，更多关于移动端如何实现1px细线的方法的资料请关注九品源码其它相关文章！