一、什么是rem？

rem是现在主流的移动端自适应布局方案，rem是根元素字体的单位，rem单位是相对于HTML标签的字号计算结果，1rem = 1HTML字号大小，比如 html{font-size:16px;} ，1rem相当于16px。不仅仅可以给字体用，其他px单位的都可以用，比如设padding:2rem ，相当于32px。

1、rem移动适配-媒体查询

目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10

写法

 /* 1，以视口宽度为375px为例  我们使用媒体查询 */
      @media (width: 375px) {
        /* 设置html标签的字体大小 */
        html {
          font-size: 37.5px;
        }
      }

      /* 2.适配414宽度 的手机 */
      @media (width: 414px) {
        html {
          font-size: 41.4px;
        }
      }

      /* 1rem=1html字号大小 */
      .box {
        width: 5.33rem;
        height: 5.33rem;
        background-color: purple;
      }

2、flexible

使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果

flexible.js是手淘开发出的一个用来适配移动端的js框架。
核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。

3.pc端媒体查询

/* 
      pc端的媒体一般条件为范围
      max-width  规定最大宽度
      min-width  规定最小宽度
       */
      @media (max-width: 1366px) {
        .box {
          width: 400px;
          height: 400px;
          background-color: skyblue;
        }
      }

      @media (min-width: 1366px) and (max-width: 1580px) {
        .box {
          width: 500px;
          height: 300px;
          background-color: orange;
        }
      }

      @media (min-width: 1580px) {
        .box {
          width: 600px;
          height: 400px;
          background-color: purple;
        }
      }

二、less语法

Less是一个CSS预处理器, Less文件后缀是.less
扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。

1.注释

单行注释
- 语法：// 注释内容
- 快捷键：ctrl + /
多行注释
- 语法：/* 注释内容 */
- 快捷键： shift + alt + A

2.less语法的运算

/*
less计算：
  + - * 除法./或者()

注意点：
 1.单位在表达式之中不分顺序，表达式中如果有多个单位以第一个单位为准；

 2.写法规范：运算符前后要么都用空格隔开，要么前后都不要空格
*/
.box {
  width: 100 + 200px;
  height: 500px - 300;
  font-size: 10 * 10px;
  // line-height: 200px ./ 10;
  width: (500 / 100px);
  height: 300px + 200deg + 10rem;

  line-height: 100px+10px;

  width: 200 +10px;
}

3.less嵌套

// 1.生成后代选择器
.box {
  background-color: red;

  .title {
    width: 200px;
  }

  .footer {
    height: 200px;
  }
}

// 2.生成子代选择器 >
.father {
  > .son {
    color: #333;

    > .sun {
      font-size: 20px;
    }
  }
}

// 3.交集选择器 &符号指代的是直接上级
p.red {
  background-color: red;
}

p {
  &.red {
    background-color: skyblue;
  }
}

// 4.并集选择器
.box1,
.box2 {
  color: #333;
}

.box {
  .son1,
  .son2 {
    color: #000;
  }
}

// 5.伪类选择器  :hover
.box li:hover a {
  color: #666;
}
.box {
  li:hover {
    a {
      color: #333;
    }
  }
}

// &符号不生成后代选择器，表示直接上级
.box {
  li {
    span {
      &:hover {
        a {
          color: #999;
        }
      }
    }
  }
}

// 6.添加伪元素
.box {
  a::before {
    content: '';
  }

  a {
    &::after {
      content: '';
    }
  }
}

// 7.结构伪类选择器 直接写在选择器的后面是没有提示的
.header {
  li:last-child {
    margin-right: 0;
  }

  li {
    &:first-child {
      margin-left: 0;
    }
  }
}

4.less变量

作用：存储数据，方便修改和使用---用法----1. 定义变量-->@变量名: 值; 2.使用变量-->CSS属性: @变量;

// 变量  @变量名: 值;
/* 大大节约维护代码成本 */
@themeColor: gold;
@fontSize: 18px;
body {
  background-color: @themeColor;
}

.box1 {
  background-color: @themeColor;
  font-size: @fontSize;

  .son {
    background-color: @themeColor;
  }
}

.footer {
  background-color: @themeColor;
  font-size: @fontSize;
}

5.less导入与导出

导入---1.作用:引入其他less文件 2.写法：@import: ‘文件及路径’;

// @import "你要导入的文件路径";
@import url(./03-计算.less);
@import './04-嵌套.less';

导出
- 导出css文件：1.控制所有less导出路径---修改EasyLess插件-----a.设置-->搜索easy-->在settings.json中编辑 b.添加代码："out": "目标存储路径"（文件夹以/结束）
- 2.单独控制某个Less文件导出路径---less文件第一行添加 // out：路径

// out: ../css/
/*
注意点：
 1.css导出路径，后面一定要写/，如果不写只是普通的文件名，不要分号结尾；
 2.less配置信息，一般要写在第一行
*/

禁止导出---less文件第一行添加： // out: false

//out: false

压缩导出
- 语法：// compress:true

三、vm/vh

  1vw = 1/100 视口宽度

  不需要引入任何的js文件，也不需要像rem一样去vscode配置文字大小

  例子：375px设备 1vw=3.75px

  （了解，用不到的）1vh = 1/100 视口高度

移动web--rem&less