移动适配

1.rem ： 目前多数企业在用的解决方案

1.使用媒体查询设置差异化CSS样式

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

image.png

目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10

目前大多使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果

l flexible.js是手淘开发出的一个用来适配移动端的js框架。
l 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。

2.vw / vh：未来的解决方案

vw / vh也是相对单位
vw：viewport width
Ø 1vw = 1/100视口宽度
vh：viewport height
Ø 1vh = 1/100视口高度

开发中不会vw和vh混用

vw / vh在项目中直接使用，不用搭配其他框架

rem和vw / vh的区别

image.png

3.Less

Less是一个CSS预处理器, Less文件后缀是.less。扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。

Easy Less :
vscode插件
作用：less文件保存自动生成css文件

运算：

Ø 加、减、乘直接书写计算表达式
Ø 除法需要添加 小括号 或 .

嵌套：

作用：快速生成后代选择器。

image.png

变量：

Ø 定义变量：@变量名: 值;
Ø 使用变量：CSS属性：@变量名;

@fontColor: pink;
.box {
color: @fontColor;
}

导入:

使用 @import “文件路径”;导入其他less文件

image.png

导出：

image.png

image.png

禁止导出：

在less文件第一行添加: // out: false