一、移动适配

• 网页内容(盒子,图片,文字) 随着设备屏幕尺寸变化而变化；
• 用一套代码, 在不同的设备屏幕尺寸下, 均能达到一个较为合理的展示；

主流适配方案

• rem方案
• vw方案

rem适配方案

• rem：相对单位；
• 相对于当前页面的HTML标签的font-size(字号大小)来计算；
• 1rem = 1HTML字号大小；
• rem单位的尺寸 = px单位数值 / 基准根字号

媒体查询

• 媒体查询能够检测设备视口的宽度，然后编写差异化的 CSS 样式；
• 当某个条件成立, 执行对应的CSS样式；

语法：

• media[媒体]

@media (width:320px) {

            html {
                font-size: 32px;
            }

        }

• 代码解读：
• 此代码只有在视口宽度为320px时, 花括号内部的html样式定义才会生效，其余场景不生效。

注意点

• 因部分电脑的显示缩放比例经过调整，查看页面元素时部分显示器带有小数点；例如: 375px 经过调整 显示为375.2px，所以书写媒体查询时, 必须width=375.2px 才可以生效，前期需要注意, 后期有其他优化方案解决。
• 利用媒体查询技术可实现检测不同的设备宽度,动态修改HTML标签的字号大小, 从而影响rem单位的变化；
• 盒子元素使用rem单位, 即可达到适配的效果；

常用媒体特性

• min-width (最小宽度)
• max-width (最大宽度)
• 实例：
• 
• 这条规则翻译过来就是:
• 
• 需要提醒一下的是CSS的优先级概念，在样式表中越后的样式优先级越高，就是后面的样式会覆盖前面的样式。在这个例子中，我们先设定了默认颜色为灰色。如果width大于960px的，会显示灰色。
• 假设width为750px，会先匹配到灰色，再匹配红色，最终显示了橙色。由于width等于750px，它不在0-550px和0-320px这个范围，浏览器不会解析这些样式

外链式CSS引入媒体查询

• 语法：
• 

二、Less

• Less是一个CSS预处理器, Less文件后缀是 .less；
• 扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力；可理解为加强版的CSS

Less运算

语法：

div {
    width: 200px;
    height: 200px;
    background-color: pink;
     加
    width: 150px + 200px;
    width: 150px + 50%;
    width: 100% + 20px;
    存在多个单位运算时, 以第一个单位为结果的单位
    width: 300px + 60;
     减
    width: 500px - 150;
     乘
    width: 25% * 4;
     除 
    width: (300px / 10);
}

• 转换后的CSS- 不会显示过程, 只会显示运算结果

Less嵌套

• 快速生成后代选择器。

语法：

注意点：

• • & 表示当前选择器，通常配合伪类或伪元素使用；
• 

Less导入

• 利用less的导入语法, 把多个文件, 汇总成一个文件；
• Html页面里只需要导入最终的1个css文件；

导入语法：

• @import “文件路径”;
• 

Less导出（Easy LESS插件）

• 调整Less文件自动导出css文件的位置；
• 禁止Less文件导出css文件；

配置EasyLess插件

• 配置成功后请重启VScode确保插件配置生效

禁止导出

语法：

• 在不需要导出CSS的 less文件第一行添加 : // out: false
•