移动端适配及1px边框问题

1、移动端适配

(function() {
  // 旋转屏幕、窗口大小改变事件
  let resizeEvt =
    "orientationchange" in window ? "orientationchange" : "resize";
  let resetFontSize = () => {
    let clientWidth = document.documentElement.clientWidth;
    document.documentElement.style.fontSize = `${clientWidth / 7.5}px`;
  };
  window.addEventListener(resizeEvt, resetFontSize, false);
  //DOMContentLoaded事件是所有DOM元素解析完成时触发（HTML文档被完全加载和解析）
  document.addEventListener("DOMContentLoaded", resetFontSize, false);
  document.addEventListener("pageshow", resetFontSize, false);
  resetFontSize();
})();

2、1px边框问题

@mixin borderLine($positoin, $color: #939393, $type: solid) {
  &::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    @if ($positoin == top) {
      border-top: 1px $type $color;
    } @else if($positoin == bottom) {
      border-bottom: 1px $type $color;
    } @else if($positoin == left) {
      border-left: 1px $type $color;
    } @else if($positoin == right) {
      border-right: 1px $type $color;
    } @else if($positoin == all) {
      border: 1px $type $color;
    }

    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
      width: 200%;
      height: 200%;
      transform: scale(0.5);
      -webkit-transform: scale(0.5);
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 3) {
      width: 300%;
      height: 300%;
      transform: scale(0.33);
      -webkit-transform: scale(0.33);
    }
    transform-origin: top left;
  }
}