less 预处理+rem 单位

rem 是相对是一个相对单位，只相当于html标签的字体大小来决定大小

em 是一个相对单位，相对于父级元素的大小，优先以自身大小来决定

浏览器默认字体为16px（像素）

媒体查询 @media 使用语法：

    @media (对应屏幕) {对应css样式}

   /* 视口宽度375px, 根字号为37.5px */
    @media (width: 375px) {
        html {
            font-size: 37.5px;
        }
    }
    .box2 {
        /* 根据标准稿(37.5px) 来 px转rem   */
        width: 4rem;
        height: 4rem;
        background-color: #bfa;
    }

less 预处理器 less是一个CSS预处理器, less文件后缀是 . less

作用：less文件保存自动生成css文件

注意： html页面引入的还是css文件，而不是 less 文件

less 注释 // 单行注释 ctrl+/

/**/ 多行注释 shift+alt+A

块注释 / 多行注释 支持换行 对多行代码的解释说明 // 单行注释

less 运算 注意点： 1.运算符之间需要用空格隔开（或者都不隔开）

2.单位默认以第一个值为准

3.除法运算和其他不同（1. ./ 2. ()）

{
width: 100 + 50px;
height: 200-50px;
padding: 10px - 5;
// 除法第一种写法
// width: 150 ./ 37.5rem;
// 除法第二种写法
width: (150 / @baseSize);
}

less 引入 第一种引入写法 @import url(./05-变量.less);

第二种引入写法 @import './02-注释.less';

less 导出 导出方法一：在当前less文件第一行加入此代码,前面要加双斜杠

// out: ../css/

导出方法二：设置->右上角文件->加入代码

"less.compile": { "out": "../css/" }

less禁止导出 less禁止导出,当前文件不在导出css文件,必须写在第一行才能生效

//out: false