移动端1px实现

添加css 1px边框时，在手机上显示为粗线，解决办法就是利用伪类设置1px边框，然后根据设备像素比进行Y轴的缩放，使其表现为真正的1px.

stylus的语法

1.定义一个函数。（找到要加1px的标签，添加定位和伪类。）

border-1px($color)  position: relative  &:after   display: block   position: absolute   left: 0   bottom: 0   width: 100%   border-top: solid 1px $color   content: ''

2.在标签上使用这个函数。

  .tab    display: flex    width: 100%    height: 40px    border-1px(rgba(7, 17, 27, 0.1))

3.添加类名，应用媒体查询。

@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)

4.在标签上添加类名

<div class="tab border-1px"></div>

5.在手机上查看，边框为细线。