移动端 1 像素 ​

即在移动端的 CSS 写了 1px，实际上显示会比 1px 粗。

产生原因 ​

主要原因是 css 像素与物理像素的区别。 不同的设备具有不同的像素比，dpr 决定了由设备的多少个物理像素显示 web css 的一个像素 比如 dpr 为 2 时，设备上由 2 个像素表现 css 上的一个像素

解决方法 ​

媒体查询 ​

通过媒体查询判断不同的设备像素比，设定不同的像素 【参考】/边框图，背景图

@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .border {
    border: 0.5px solid #000;
  }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
  .border {
    border: 0.333333px solid #000;
  }
}

• 兼容不太好

:before:after 和 transform ​

原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。

.scale-1px{
     position: relative;
     border:none;
 }
.scale-1px:after{
     content: '';
     position: absolute;
     bottom: 0;
     background: #000;
     width: 100%;
     height: 1px;
     -webkit-transform: scaleY(0.5);
     transform: scaleY(0.5);
     -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
}

if(window.devicePixelRatio && devicePixelRatio >= 2){
	 document.querySelector('div').className = 'scale-1px';
}

设置 vieport ​

通过缩放，让 CSS 像素等于真正的物理像素

const scale = 1 / window.DeviceRotationRate;
const viewport = document.querySelector("meta[name=viewport");
if (!viewport) {
  viewport = document.createElement("meta");
  viewport.setAttribute("name", "viewport");
  window.document.head.appendChild(viewport);
}
viewport.setAttribute(
  "content",
  "width=device-width,user-scalable=no,initial-scale=" + scale + ",maximum-scale=" + scale + ".minimun-scale=" + scale
);

• 方便

flexible 即 rem ​

废啦废啦

vh,vw 方案 ​

即将视觉窗口宽度 window.innerWidth 和视觉窗口高度 window.innerHeight 等分为 100 份

• vw(Viewport width): 1wv 等于视觉窗口的 1%
• vh（Viewport height） 1hw 等于视觉窗口高度的 1%
• vmin ： vw 和 vh 中的较小值
• vmax : vw 和 vh 中的较大值

如果视觉窗口为 375px，那么 1vw = 3.75px。这时 ui 给一个元素的宽为 75px(设备独立像素).我们只需要将他设置为 75 / 3.75 = 20vw

使用 box-shadow 模拟边框 ​