一.移动适配

1.

适配移动端过程：

       1.要利用媒体查询规定不同的屏幕宽度设置不同的根字号大小；屏幕宽度的1/10

       2.页面元素就可以使用rem相对单位，1rem=1html文字大小

2.less

1.注释

/*

shift+alt+a

块注释，是会编译在css中

*/

/**

这里会编译码

**/

2.计算

/*

less计算：

  + - * 除法./或者()

注意点：

 1.单位没有顺序之分，如果一个表达式之中有多个单位，以第一个单位为准

 2.运算符的前后，要么都加空格隔开，要么都不加

*/

3.嵌套

// 1.生成后代选择器

.box {

  width: 300px;

  height: 300px;

  .title {

    border-radius: 50%;

    .left {

      margin-left: 40px;

    }

    .right {

      padding-top: 50px;

    }

  }

}

// 2.生成子代选择器 >

.father {

  background-color: purple;

  > .son {

    background-color: #6cf;

    > .sun {

      background-color: orange;

    }

  }

}

// 3.交集选择器 &符号指代的是直接上级

.box1 {

  color: #6cf;

  span {

    &.box2 {

      color: aliceblue;

    }

  }

}

// 4.并集选择器

.box1,

.box2 {

  color: #333;

}

.box1 {

  &,

  .box2 {

    color: #999;

  }

}

// 5.伪类选择器  :hover

.box {

  a:hover {

    color: #666;

  }

  a {

    &:hover {

      color: #444;

    }

  }

  li:hover {

    a {

      color: #222;

    }

  }

  li {

    &:hover {

      a {

        color: #333;

      }

    }

  }

}

// 6.添加伪元素

.box {

  li::before {

    content: '';

  }

  li {

    &::before {

      content: '';

    }

  }

}

// 7.结构伪类选择器 直接写在选择器的后面是没有提示的

.box {

  li:first-child {

    margin-left: 0;

  }

  li {

    &:nth-child(2) {

      margin-bottom: 0;

    }

  }

}

4.变量

// 变量  @变量名: 值; 大大节约维护成本

/*

变量名看做是一个存值的容器

*/

5.导入

// @import "你要导入的文件路径";

// less文件导入只能导入.less文件

@import url(./03-计算.less);

@import './04-嵌套.less';

6.导出

// out: ../css/

/*

注意点：

 1.路径如果表示文件夹，最后一定要有/

 2.属于less配置信息，一定要写在第一行，如果写在第二行，那么第一行不能再写任何内容

*/

7.禁止导出

//out: false

8.压缩导出

// compress:true,out:../css2/

/*

节约成本，让网页渲染的更快

如果多个配置一起写，配置与配置之间以英文逗号隔开

*/