1️⃣ 利用 css 的 伪元素::after + transfrom 进行缩放

为什么用伪元素？ 因为伪元素::after或::before是独立于当前元素，可以单独对其缩放而不影响元素本身的缩放
伪元素大多数浏览器默认单引号也可以使用，和伪类一样形式，而且单引号兼容性（ie）更好些

  1. // 当某个元素需要设置 1px 的边框时为元素设置相对定位并且添加指定的类名即可
  3. <!-- 全部边框 -->
  4. .border-1px:after {
  5.     content: '';
  6.     position: absolute;
  7.     top: 0;
  8.     left: 0;
  9.     box-sizing: border-box;
  10.     width: 100%;
  11.     height: 100%;
  12.     border: 1px solid #000;
  13.     -webkit-transform: scale(0.5);
  14.     transform: scale(0.5);
  15.     -webkit-transform-origin: top left;
  16. }
  18. <!-- 单边框，以上边框为例 -->
  19. .border-1px-top:after {
  20.     content: "";
  21.     position: absolute;
  22.     top: 0;
  23.     left: 0;
  24.     right: 0;
  25.     border-top: 1px solid red;
  26.     transform: scaleY(0.5);
  27.     transform-origin: left top;
  28. }
  30. // 在高清屏幕下设置
  31. @media screen and (-webkit-min-device-pixel-ratio: 2){
  32.     .border-1px-top:after{
  33.         transform:scaleY(0.5); // 2倍屏 伪元边框缩小为一半
  34.     }
  35. }
  36. @media screen and (-webkit-min-device-pixel-ratio: 3){
  37.     .border-1px-top:after{
  38.         transform:scaleY(0.33333); // 3倍屏 伪元边框缩小为三分之一
  39.     }
  40. }