less 预处理+rem 单位

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

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

3. 浏览器默认字体为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

1. 块注释 / 多行注释
2.  支持换行
3. 对多行代码的解释说明

// 单行注释

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 导出

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

2. // out: ../css/

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

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

less禁止导出

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

//out: false