移动端实1px细线方法

前言

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

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

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

解决办法

实现1px的线

方法一：transform

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

.line{      
    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;
　　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;
　　 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;

             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>