移动端1px实现

移动端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.在手机上查看，边框为细线。