less+rem 布局

Less是一门css扩展语言，也成为预处理器

Less

Less变量

变量没有特定的值，需改变。例如：颜色和数值等经常使用。
@变量名：值；
注意：
必须有@为前缀
不能包含特殊字符
不能以数字开头
大小写敏感

@color:pink;
span {
    background-color: @color;
}
div {
    color: @color;
}

Less编译

本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法自己的样式规则，这些规则最终会通过解析器，生成相应的css文件。
我们需要把less文件编译为css文件。
less文件保存vscode会直接编译为css文件

Less嵌套

1.less嵌套：子元素的样式直接写到父元素里面

@color:pink;
div {
    color: @color;
    span {
    background-color: @color;
}
}

2.如果遇到（交集/伪类/伪元素选择器），内存选择器需加&
内存选择器的前面没有&符号，则他被解析为父选择器的后代
如果有&符号，他就被解析为父元素自身或父元素的伪类

@color:pink;
div {
    color: @color;
    span {
    background-color: @color;
    ::before {
        color: blue;
    }
}
}

Less运算（重点）

任何数字、颜色或者变量都可以参与运算。就是less提供了加(+)、减(-)、乘(*)、除(/)算数运算
注意：
运算符中间左右有个空格隔开，1px + 5
对于两个不同单位的值之间的运算，结果取第一个值的单位
如果两个值之间只有一个值有单位，则运算结果就取该单位

@border:5px;
div {
    height: 200px - 59;
    width: 200px / 2;
    border: @border solid red;
}

rem适配方案

适配目标

让一些不能等比自适应的元素，达到当设备尺寸发生改变时，等比例适配当前设备

如何达到目标

使用媒体查询根据不同设备按比例设置html的大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配

在实际开发中使用

适配方案1 rem+less技术+媒体查询

   1.我们首先选一套标准尺寸 750为准 */
   2.用屏幕尺寸 除以 划分的份数，得到html中的文字大小，但是不同屏幕下得到的文字大小不同 
   3.页面元素的rem值 = 页面元素在750px下的值 除以 html中的文字大小 

@media screen and (min-width: 320px) {
            html {
                font-size: 40px;
            }
        }
        @media screen and (min-width: 630px) {
            html {
                font-size: 100px;
            }
        }
        div {
            height: 2rem;
            width: 2rem;
        }