rem基础（rem单位），媒体查询（语法规范（mediatype查询类型，关键字，媒体特性，引入资源，）），less基础（维护CSS的弊端，介绍，使用，变量，编译，vscode插件，嵌套，运算）

rem基础

rem单位 

em是根据父元素的字体大小来设置的，而rem是根据html的字体大小来设置的，也就是说一个页面有很多父元素可能em并不好用，但一个页面只有一个html字体大小，所以rem配合媒体查询用在移动端可以先识别屏幕大小然后再设置本身进行不同屏幕不同html字体大小的设置

媒体查询

语法规范

<style>
        /* 当屏幕尺寸宽度小于等于800，使用以下设置 */
        @media screen and (max-width: 800px){
            body {
                background-color: pink;
            }
        }
        /* 当屏幕尺寸宽度小于等于500，使用以下设置 */
        @media screen and (max-width: 500px){
            body {
                background-color: blue;
            }
        }
    </style>

mediatype查询类型

将不同终端设备划分成不同的类型，称为媒体类型

（第三个应该是screen，少打了个字母）

关键字

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件

媒体特性

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格

注意要加小括号

引入资源

当样式比较繁多的时候，我们可以针对不同媒体使用不同stylesheets样式表，原理就是在link种判断设备尺寸然后引用不同css文件

less基础

维护CSS的弊端

less介绍

less使用

less变量

变量是指没有固定的值，可以改变的，在我们CSS中的一些颜色和数值经常使用所以可以定义为变量

就和一般的编程一样，定义一个变量，然后用变量代替以前填空地方就行，这样写的好处就是方便后期修改维护

@color: pink;
body {
    background-color: @color;
}

less编译

vscode less插件

在vscode中，我们可以通过下载easy less插件来实现保存一个less文件自动生成一个css样式文件，这样我们就可以直接使用了

less嵌套

在less中，我们可以直接使用嵌套的写法，不过如果碰到伪类就要加一个&，官方的解释是比如你要写a::after，这个&就代表a的意思，直接上代码！

less运算

在less中，任何数字、颜色、变量都可以进行加减乘除的算数运算（除法运算要加小括号）

@width: 10px + 5;
div {
    border: @width solid red;
}
@width: (10 + 5)px;
div {
    border: @width solid red;
}
@width1: (10 / 3)px;
.diiv {
    border: @width1 solid red;
}

div {
  border: 15px solid red;
}
div {
  border: 15px solid red;
}
.diiv {
  border: 3.33333333 px solid red;
}