使用less传参结合媒体查询，实现手机、平板、PC等多端UI适配

用法：
1.声明变量，@fontSize是要传的参数，注意这个参数，如果要传的是字号，就要驼峰式的@fontSize，如果是想传颜色，就改成@color，如果想传margin-left,就要改成@marginLeft，以此类推…
我们把这个当成一个函数，括号里面的参数可以是常量也可以是变量，也可以传多参。

<style lang="less">
//声明变量 #font
#font (@fontSize){
  @media (min-width: 350px) {
    font-size: @fontSize;
  }
  @media (min-width: 414px) {
    font-size: @fontSize;
  }
  @media (min-width: 600px) {
    font-size: @fontSize + 5;
  }
  @media (min-width: 768px) {
    font-size: @fontSize + 10;
  }
  @media (min-width: 800px) {
    font-size: @fontSize + 10;
  }
  @media (min-width: 1366px) {
    font-size: @fontSize + 10;
  }
  @media (min-width: 1920px) {
    font-size: @fontSize + 15;
  }
}
</style>

2.在需要适配的样式里使用该媒体查询，例如：

.time-box {
  position: absolute;
  top: 6vw;
  color: #333;
  opacity: 0.5;
  font-size: 12px;//这是原来没有做适配时的写法
  #font(12px);//这是调用了媒体查询，传入的参数是12px
}

.smallName {
  margin: 17px 0px 0px 35px;
  text-align: left;
  font-size: 20px;//这是原来没有做适配时的写法
  #font(20px);//这是调用了媒体查询，传入的参数是12px
  font-weight: 600;
}

想要更多的机型尺寸请看：《使用chatgpt工具实现媒体查询适配各大厂商手机》