移动端适配

rem

rem优势：

rem优势：父元素文字大小可能不一致，但是控制整个页面只有一个HTML，可以很好的控制整个页面的元素大小

rem

• 会相对所给的html文字大小，来给定相对应的大小

媒体查询

• 使用媒体查询查询，根据不同的视口宽度，设置不同的根字号，就完成了适配

 <style>
 /* 媒体查询语法*/
   /*  @media(媒体特性){
         选择器{
             css属性；
         }
     }*/
      /* 视口适配 -- 媒体查询 */
         @media(width:375px) {
             html {
                 font-size: 37.5rem;
             }
     
 </style>

less（css预处理器）

作用：

扩充了css语言，是css具备一定的逻辑性、计算能力

使用less语法编译插件

• 需要下载Easy less插件
• 作用：less文件保存自动生成css文件
• html页面引入的还是css文件，而不是less文件

使用less语法需要注意

• 可以实现加减乘除
• 书写方式的时候需要注意子集样式放在父级盒子里
• 伪类元素和伪元素书写的时候加入&

 .father {
     width: 300px;
     height: 300px;
     background-color: pink;
 ​
     .son {
         width: 150px;
         height: 150px;
         background-color: skyblue;
     }
 ​
     // 当鼠标经过father时候里面son盒子颜色发生变化
     &:hover .son {
         background-color: blue;
     }
 ​
     // father伪元素为1
     &::after {
         content: '1';
     }
 }
 ​

less变量

• 定义变量 ：@定义名称：颜色

  @clpink：pink

less导入

• @import '文件路径'
• @import url(./文件路径)
• 相当于使用link标签引入css文件

less导出

• //out： ./css/