移动端一像素问题解决方案

1.为什么会有一像素问题

在移动端分辨率是不相同的,目前来说可以分一倍屏,二倍屏,三倍屏,在不同分辨率上显示的1像素可能会被渲染为2个像素点或者三个像素点,这样严重影响了美观,所以我们要解决一像素问题

2.原生简单写法

html

<div>
    <div class="border"></div>
  </div>

css ::after里面的width:200%;height:200%就是把after元素放大两倍,原来的边框像素还是1px原来的大小,再用tranform:translate(.5)是把元素压缩,原来的1px还是1px,但是被压缩成一半的大小了,所以看起来系了(这里是拿dpx为2做的例子)

.border {
    width: 200px;
     height: 200px;
     background-color: pink;
     position: relative;
 }
 .border::after {
     content: 'aaaa';
      position: absolute;
      border:1px solid green;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      transform: scale(0.5);//默认是以元素中心进行缩放的
      transform-origin: 0 0 ;//以元素左上角为基准来进行缩放
      width: 200%;
      height: 200%;
  }

第一个是应用1像素的,第二个没有,可以肉眼看出差别

3.媒体查询写法(stylus写法)

device-pixel-ratio(设备像素比) 物理像素与逻辑像素比

$border(width = 0, color = #ccc, style = solid, radius = 0)
  position relative
  border-radius radius
  &::after
    pointer-events none
    position absolute
    z-index 999
    top 0
    left 0
    content ""
    border-color color
    border-style style
    border-width width

    @media (max--moz-device-pixel-ratio: 1.49),
      (-webkit-max-device-pixel-ratio: 1.49),
      (max-device-pixel-ratio: 1.49),
      (max-resolution: 143dpi),
      (max-resolution: 1.49dppx)
      width 100%
      height 100%
      transform scale(1)
      border-radius radius

    @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49),
      (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),
      (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),
      (min-resolution: 144dpi) and (max-resolution: 239dpi),
      (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx)
      width 200%
      height 200%
      transform scale(0.5)
      border-radius radius * 2

    @media (min--moz-device-pixel-ratio: 2.5),
      (-webkit-min-device-pixel-ratio: 2.5),
      (min-device-pixel-ratio: 2.5),
      (min-resolution: 240dpi),
      (min-resolution: 2.5dppx)
      width 300%
      height 300%
      transform scale(0.3333333)
      border-radius radius * 3

    transform-origin 0 0

resolution(像素密度)

4.如何获取dpr

css获取dpr方法:

1. max-device-pixel-ratio 小于等于1.49 dpr为1

   (max–moz-device-pixel-ratio: 1.49),
   (-webkit-max-device-pixel-ratio: 1.49),
   (max-device-pixel-ratio: 1.49),

2. 大于等于 min-device-pixel-ratio: 1.5并且小于等于max-device-pixel-ratio: 2.49 dpr为2

   (min–moz-device-pixel-ratio: 1.5) and (max–moz-device-pixel-ratio: 2.49),
   (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),
   (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),

3. 大于等于 min-device-pixel-ratio: 3.5 dpr为3
   (min–moz-device-pixel-ratio: 2.5),
   (-webkit-min-device-pixel-ratio: 2.5),
   (min-device-pixel-ratio: 2.5),