rem,less

rem

目标：能够使用rem单位设置网页元素的尺寸
l 网页效果
Ø 屏幕宽度不同，网页元素尺寸不同（等比缩放）
l px单位或百分比布局可以实现吗？
Ø px单位是绝对单位
Ø 百分比布局特点宽度自适应，高度固定
l 适配方案
Ø rem
Ø vw / vh

rem单位

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

rem移动适配 - 媒体查询

目标：能够使用媒体查询设置差异化CSS样式
l 思考
Ø 手机屏幕大小不同，分辨率不同， 如何设置不同的HTML标签字号？
Ø 媒体查询
l 媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
l 当某个条件成立, 执行对应的CSS样式

666.png

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

rem单位尺寸

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

rem单位的尺寸

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

flexible

目标：使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果
l flexible.js是手淘开发出的一个用来适配移动端的js框架。
l 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。

566.png

Less语法

目标：使用Less运算写法完成px单位到rem单位的转换
l Less是一个CSS预处理器, Less文件后缀是.less
l 扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
l 注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。

编译插件

目标：使用Less语法快速编译生成CSS代码
Easy Less :
l vscode插件
l 作用：less文件保存自动生成css文件
注释：
l 单行注释
Ø 语法：// 注释内容
Ø 快捷键：ctrl + /
l 块注释
Ø 语法：/* 注释内容 */
Ø 快捷键： shift + alt + A
运算：
l 加、减、乘直接书写计算表达式
l 除法需要添加 小括号 或 .

注意：

Ø 表达式存在多个单位以第一个单位为准

变量

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

567.png

3344.png

控制当前Less文件导出路径

Ø Less文件第一行添加如下代码, 注意文件夹名称后面添加 /
//out: .css/
禁止导出
Ø 在less文件第一行添加: // out: false