移动端1px边框的问题

window.devicePixelRatio

1. 返回当前显示设备的物理像素分辨率与css像素分辨率之比
2. 物理像素: 设备能控制显示的最小单位, 是设备屏幕上的像素点个数
3. 逻辑像素: 又称为设备独立像素, 屏幕上的物理像素和逻辑像素, 并不是相等, 一般是物理像素大于逻辑像素, 其比值就是devicePixelRatio

以iphone12为例:

1. iphone12物理分辨率是: 1170 * 2352
2. iphone12逻辑分辨率: 390 * 844
3. devicePixelRatio = 1179 / 390 = 3;

现在的手机越来越高清了,所以设备像素比也就越来越高,也就出现了1px像素的边框在不同的设备显示可能就是2px, 甚至可能是3px(就如上述iphone手机);

devicePixelRatio中文名称: 设备像素比

devicePixelRatio 值 = 物理像素/设备独立像素

=>

DPR = 设备像素DP/CSS像素

物理像素:     DP(device pixels) 

设备像素（物理像素），顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位pt。

设备独立像素:    CSS像素 = 设备独立像素 = 逻辑像素

解决1px边框border线的方法:

解决一像素的问题,基本思路是利用伪元素写border样式,再利用媒体查询将该边框纵向缩小,使得devicePixelRatio 值*缩小的倍数大约等于1(最好比1大一点,有些设备可能显示不了小于1像素的边框)

1. 媒体查询部分css代码:

@media (-webkit-min-device-pixel-ratio: xxx),(min-device-pixel-ratio: xxx)//是指当时显示屏最小的色倍为xxx倍的
  .border-1px
    &::after
      -webkit-transform: scaleY(1/xxx)
      transform: scaleY(1/xxx)

注意: 1/xxx的值取小数a, a*xxx >= 1(尽可能接近1, 不要小于1)

2. 在需要1px边框线的标签加上class="border-1px"

<template>
  <div id="app">
    <ul>
      <li>1</li>
    </ul>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  },
  mounted() {
    alert(window.devicePixelRatio); //检测设备是几倍屏幕
    return
  }
}
</script>
<style lang="stylus">
//devicePixelRatio 值 = 物理像素/设备独立像素
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)//是指当时显示屏最小的色倍为1.5倍的
  .border-1px
    &::after
      -webkit-transform: scaleY(0.7)//纵向缩小到0.7倍--因为0.7*1.5=1.05大约等于1
      transform: scaleY(0.7)

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.5)//纵向缩小到0.7倍--因为0.5*2=1等于1
      transform: scaleY(0.5)

@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.34)
      transform: scaleY(0.34)

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

border-none()
  &:after
    display: none

* 
  margin: 0
  padding: 0
ul
  width: 100%
  list-style: none
  li
    height: 50px
    border-1px(red)
    border-1px-left(blue)
</style>

使用scss语法示例:

.border-bottom-1px { // 媒体查询dpr+修改border的值: dpr * border的数值约等于1
      position: relative;

      &::after {
        content: '';
        position: absolute;
        width: 100%;
        border-bottom: 1px solid #333;
        @media screen and (min-device-pixel-ratio:2), (-webkit-min-device-pixel-ratio:2) {
          border-bottom: 0.5px solid #333;
        }
        @media screen and (min-device-pixel-ratio:3), (-webkit-min-device-pixel-ratio:3) {
          border-bottom: 0.333px solid #333;
        }
      }
    }
    .border-top-1px { // 媒体查询dpr+修改scale的值: dpr * scale的数值约等于1
      position: relative;

      &::before {
        content: '';
        position: absolute;
        width: 100%;
        border-top: 1px solid #333;
        @media screen and (min-device-pixel-ratio:2), (-webkit-min-device-pixel-ratio:2) {
          transform: scaleY(0.5);
        }
        @media screen and (min-device-pixel-ratio:3), (-webkit-min-device-pixel-ratio:3) {
          transform: scaleY(0.333);
        }
      }
    }

在css选择器中使用:

在选择器中使用:
eg1: 
& .list-item {
      ...略,
      @extend .border-top-1px;
    }


eg2: 
& .list-item {
      ...略,
      @extend .border-bottom-1px;
    }


eg3: 
& .list-item {
      ...略,
        @extend .border-top-1px;
      @extend .border-bottom-1px;
    }