less+rem移动端适配+PC

//声明
@test_width:300px;

// 混合
.box{
width: @test_width;
height: @test_width;
background: yellowgreen;
.border
}
//混合 可以带参数

嵌套 &
less

// 变量
// 适配主流设备
@adapterDeviceList:320px,360px,375px,384px,400px,414px,424px,480px,540px,640px,720px,750px;
// 设备的种类
@len:length(@adapterDeviceList);
// 预设基准值
@baseFontSize:100px;
// 设计稿尺寸
@psdWidth:750px;
 
// 混入
// less中的index是从1开始的，比起索引，应该叫做序号
.adapterMixin(@index:1) when (@index<=@len){
    @media (min-width: extract(@adapterDeviceList,@index)) {
        html{
            font-size: @baseFontSize/@psdWidth*extract(@adapterDeviceList,@index);
        }
    }
    .adapterMixin(@index+1);
}
 
// 适配
.adapterMixin();

使用less迭代语法，对主流的每一个设备尺寸设置媒体查询，从而实现适配。如果有设备可以添加到@adapterDeviceList这个数组中，方便后期更好地维护。

以下是less生成的css代码：

@media (min-width: 320px) {
  html {
    font-size: 42.66666667px;
  }
}
@media (min-width: 360px) {
  html {
    font-size: 48px;
  }
}
@media (min-width: 375px) {
  html {
    font-size: 50px;
  }
}
@media (min-width: 384px) {
  html {
    font-size: 51.2px;
  }
}
@media (min-width: 400px) {
  html {
    font-size: 53.33333333px;
  }
}
@media (min-width: 414px) {
  html {
    font-size: 55.2px;
  }
}
@media (min-width: 424px) {
  html {
    font-size: 56.53333333px;
  }
}
@media (min-width: 480px) {
  html {
    font-size: 64px;
  }
}
@media (min-width: 540px) {
  html {
    font-size: 72px;
  }
}
@media (min-width: 640px) {
  html {
    font-size: 85.33333333px;
  }
}
@media (min-width: 720px) {
  html {
    font-size: 96px;
  }
}
@media (min-width: 750px) {
  html {
    font-size: 100px;
  }
}

less版本pc端
编译过后与css版本一样,但更灵活，自动计算，适用手机与PC;

html{
      @firstViewportWidth: 1920px;     //默认UI设计尺寸
      @defaultFontSize: 100px;          //默认初始fontsize大小
      @media screen and (width: @firstViewportWidth){  //绑定到没听查询
        font-size: @defaultFontSize;
        min-width: 100%;
      };

   //根据传入的屏幕尺寸@viewportWidth计算出与初始@firstViewportWidth的比
     例，然后将默认的fontsize> @defaultFontSize对应的放大缩小
     .media(@viewportWidth,@firstViewportWidth:1920px){
        @media screen and (min-width: @viewportWidth) {
        font-size: @defaultFontSize / (@firstViewportWidth /   
    @viewportWidth)!important;
    }
      };
      .media(1024px);     //所要设配的屏幕尺寸
      .media(1366px);
      .media(1280px);
      .media(1440px);
      .media(1600px);
      .media(1920px);
    }
    @media screen and (max-width: 1440px) {
      html {
        font-size: 75px !important;
      }
    }