7种方法解决 移动端 1px边框
https://blog.csdn.net/z591102/article/details/106404049
https://www.codenong.com/cs106143210/

https://blog.csdn.net/duanhy_love/article/details/123568732

transform 实现1px边框

伪类+transform是比较完美的方法，原理

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

border1px

scss, mixin，支持定义函数，传入变量

  1. .border1px($color:) {
  2.   position: relative;
  4.   &:after {
  5.     content: '';
  6.     position: absolute;
  7.     left: 0;
  8.     bottom: 0;
  9.     width: 100%;
  10.     border-top: 1px solid $color;
  11.     transform: scaleY(0.5);
  12.   }
  13. }
  15. .border-none() {
  16.   &:after
  17.     display: none;
  18. }
  21. .bg-image($url) {
  22.   background-image: url($url + "@2x.png");
  24.   @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
  25.     background-image: url($url + "@3x.png")
  26.   }
  27. }

border1px less

  1. // mixin
  2. .foo(@bg: #f5f5f5, @color: #999){
  3.     background: @bg;
  4.     color: @color;
  5. }
  7. // 移动端 1px边框
  8. .border1px(@color: rgba(7,17,27, .1)) {
  9.   position: relative;
  11.   &:after {
  12.     position: absolute;
  13.     left: 0;
  14.     bottom: 0;
  15.     width: 100%;
  16.     border-top: 1px solid $color;
  17.     content: '';
  18.   }
  19. }
  21. @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
  22.   .border-1px
  23.     &::after
  24.       -webkit-transform: scaleY(0.7)
  25.       transform: scaleY(0.7)
  27. @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
  28.   .border-1px
  29.     &::after
  30.       -webkit-transform: scaleY(0.5)
  31.       transform: scaleY(0.5)
  33. .clearfix
  34.   display: inline-block
  35.   &:after
  36.     display: block
  37.     content: "."
  38.     height: 0
  39.     line-height: 0
  40.     clear: both
  41.     visibility: hidden
  43. // 使用
  44. .tab {
  45.   .foo();
  46.   .border1px(#f00);
  47. }

mixin参考 https://www.jianshu.com/p/6a1dedde2316

bg-image 3x icon

https://blog.csdn.net/hzxOnlineOk/article/details/103562629
https://blog.csdn.net/sinat_33184880/article/details/105290142
image.png

  1. .bg-image(@url) {
  2.   display: inline-block;
  3.   margin-right: 4px;
  4.   background-image: ~"url(./icon/@{url}@2x.png)";
  5.   background-repeat: no-repeat;
  6.   font-style:normal; // 清除斜体
  7.   vertical-align: middle;
  9.   @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  10.     background-image: ~"url(./icon/@{url}@3x.png)";
  11.   }
  12. }
  14. .bulletinTitle {
  15.     vertical-align: -2px;
  16.     width: 22px;
  17.     height: 12px;
  18.     margin-right: 4px;
  19.     .bg-image('user');
  20.     background-size: 22px 12px;
  21.   }

@import

引入 less全局变量

  1. @import '~@/assets/less/@mixin.less';

@mixin的常用方法
https://blog.csdn.net/Tokki_/article/details/94441903