html代码向左移动1px,移动端如何实现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;

}