今日重点: 移动适配

rem： 目前多数企业在用的解决方案
vw / vh：未来的解决方案

1.rem

能够使用rem单位设置网页元素的尺寸
思考 :
Ø手机屏幕大小不同，分辨率不同， 如何设置不同的HTML标签字号？
Ø设备宽度不同，HTML标签字号设置多少合适？
Ø设备宽度大， 元素尺寸大
Ø设备宽度小，元素尺寸小

px单位或百分比布局可以实现吗？
Ø px单位是绝对单位
Ø百分比布局特点宽度自适应，高度固定

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

2. rem移动适配

能够使用媒体查询设置差异化CSS样式
思考 :
Ø手机屏幕大小不同，分辨率不同， 如何设置不同的HTML标签字号？

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

写法 :

示意图

3. rem适配原理

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

1. 根据视口宽度，设置不同的HTML标签字号

2. 书写代码，尺寸是rem单位
   确定设计稿对应的设备的HTML标签字号
   查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）

   rem单位的尺寸
   Ø N * 37.5 = 68 → N = 68 / 37.5
   Ø rem单位的尺寸 =** px单位数值 / 基准根字号**
   

4. flexible

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

思考：
咱们检测了3个视口，分别设置了根字号，有什么弊端吗？
答：手机设备多，屏幕尺寸不一，视口不仅仅有这3个

1. Less

使用Less运算写法完成px单位到rem单位的转换
思考：
在px单位转换到rem单位过程中，哪项工作是最麻烦的？
答：除法运算。CSS不支持计算写法。
解决方案：可以通过Less实现。

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

块注释
Ø语法：/ 注释内容 /
Ø快捷键： shift + alt + A
使用Less运算写法完成px单位到rem单位的转换

运算：
加、减、乘直接书写计算表达式
除法需要添加 小括号 或 .
注意：
Ø 表达式存在多个单位以第一个单位为准

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

语法：

.box { color:pink }        a { color:pink }       p { color:pink }

Ø方法二： 把颜色提前存储到一个容器，设置属性值为这个容器名

**变量：存储数据，方便使用和修改**

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

// 1. 定义
@fontColor：pink;
// 2. 使用
.box { color:@fontColor }
.a { color:@fontColor }

能够使用Less导入写法引用其他Less文件
思考：
Ø 开发网站时，网页如何引入公共样式？
ØCSS：书写link标签
ØLess：导入
导入: @import “文件路径”;

方法一：
Ø 配置EasyLess插件， 实现所有Less有相同的导出路径
配置插件： 设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码（注意，必须是双引号）

1  // out: ./css/
1  // out: ./css/common.css

禁止导出 : **
Ø 在less文件第一行添加: // out: false**

1  //out:false

实战演练

准备工作：项目目录及文件
根目录（paradise / FC）

目标：实现在不同宽度设备中等比缩放的网页效果
整体布局：网页为灰色背景色

主体内容
Ø 底部间距（高度与工具栏相同）

底部工具栏
Ø固定定位
Ø尺寸
Ø背景色