移动适配的两种方案

rem

目标：能够使用rem单位设置网页元素的尺寸

• 网页效果：屏幕宽度不同，网页元素尺寸不同（等比缩放）
• rem单位：

1. 相对单位
2. rem单位是相对于HTML标签的字号计算结果
3. 1rem=1HTML字号大小

rem移动适配-媒体查询

目标：能够使用媒体查询设置差异化CSS样式

• 媒体查询能够检测视口的宽度，然后编写

写法

@media （媒体特性） {
    选择器 {
        CSS属性
    }
}

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

rem适配原理

目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果

1. 确定设计稿对应的设备的HTML标签字号

• 查看设计稿宽度-确定参考设备宽度（视口宽度）-确定基准根字号（1/10视口宽度）

1. rem单位的尺寸

• rem的单位尺寸=px单位数值/基准根字号

flexible

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

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

Less语法

目标：使用Less运算写法完成px单位到rem单位的转换

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

扩充CSS语言，使CSS语言具有一定的逻辑性、计算能力

注意：浏览器不识别less代码，目前阶段，网页要引入对应的css文件

编译插件

Easy Less vscode插件

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

注释：

单行注释：语法：//注释内容   快捷键：ctrl+/

块注释：/*注释内容*/         快捷键：shift+alt+A

运算：

加、减、乘直接书写计算表达式

除法需要添加小括号或.

嵌套：

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

语法：

.父级选择器 {
    //父级样式
    .子级选择器{
        //子级样式
    }
}

注意：&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用

变量

存储数据，方便使用和修改

语法：

• 定义变量：@变量名：值；
• 使用变量：CSS属性：@变量名

导入

@import  “文件路径”；

导出

• 方法一：配置EasyLess插件，实现所有Less有相同的导出路径
• 方法二：在Less文件第一行写//out：指定文件夹

禁止导出

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

vw/vh

目标：能够使用vw单位设置网页元素的尺寸

• 相对单位
• 相对视口的尺寸计算结果
• vw：viewport width     1vw=1/100视口宽
• vh：viewport height    1vh=1/100视口高

vw单位尺寸

• 查看设计稿宽 - 确定参考设备宽（视口宽度）- 确定vw尺寸（1/100视口宽度）
• vw单位尺寸 = px单位数值/（1/100视口宽度）