less

less

/*注释：在css中可以使用*/
//注释：不支持
/*变量：1，必须是以@前缀，有分号结尾
        2，命名规则呵js变量的命名规则一样
        区分大小写，字母数字下划线，不能以数字开头*/

函数的混合---参数
  定义了参数（没有默认值）：调用的时候必须传入参数
  定义了参数（有默认值）：调用的时候可以不传入参数

&:中间不留空格

：找到子代

div a>img{
    width:100%
}

div{
  a{
    display: block;
  }
  >img{
      width: 100%;
    }
}

&:hover{
  color: red;
}

a:hover {
  color: red;
}

em

em：相对单位，相对于body的字体大小 ，1em=body设置的字体px

​ 列body=16px,

​ 2em=32px;

rem

rem：相对单位，r+em r：root 根 相对于HTML设置的字体大小

移动端常用的布局

1. 流式布局，设置宽度百分比

2. 伸缩盒布局（弹性布局）flex

3. 响应式布局 媒体查询（在超小屏时，使用的也是流式布局）

------共同点：元素只能做宽度上的适配

实现宽度和高度都能做到的（等比缩放）适配：

​ 通过rem布局-----将页面中能用到px单位都转换为rem单位

​ 计算rem的基准值：预设的基准值/设计稿宽度*当前设备的宽度

less中的循环---函数的迭代，递归（需要使用序号遍历）

​ 函数名（）when（）{

​ 方法

​ 函数名（）；

​ }

列：

.adapterMixin(@index) when(@index>0){
  @media(min-width: extract(@adapterDeviceList,@index)){
    //@media(min-width: 414px){
    //  html{
    //    font-size: 414*100/750px;
    //  }
    //}
    //1rem
    html{
      font-size: @baseFontSize/@psdwidth*extract(@adapterDeviceList,@index);
    }
  }
  .adapterMixin(@index - 1);
}

rem的基准值：预设的基准值/设计稿的高度*当前设备的宽度

extract（数组名，索引）

 extract(@adapterDeviceList,@index)