rem解决方案
网页效果
屏幕宽度不同，网页元素尺寸不同（等比缩放）
px单位或百分比布局可以实现吗？
px单位是绝对单位
%百分比布局特点宽度自适应，高度固定
适配方案:rem, vw / vh
1.rem适配
rem单位:
相对单位
rem单位是相对于HTML标签的字号计算结果
1rem = 1HTML字号大小
手机屏幕大小不同，分辨率不同， 如何设置不同的HTML标签字号？
2.媒体查询
媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
当某个条件成立, 执行对应的CSS样式
image.png
设备宽度不同，HTML标签字号设置多少合适？
html字体大小设置为屏幕视口的 1/10
目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10
image.png
3. rem 适配原理:
rem单位尺寸
1. 根据视口宽度，设置不同的HTML标签字号
2. 书写代码，尺寸是rem单位
2.1 确定设计稿对应的设备的HTML标签字号
查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
2.2 rem单位的尺寸
N * 37.5 = 68 → N = 68 / 37.5
rem单位的尺寸 = px单位数值 / 基准根字号
4.flexible:
1.flexible.js是手淘开发出的一个用来适配移动端的js框架。
2.核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。
3.flexible.js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果
image.png
利用rem+flexible.js画盒子↓
image.png
Less
使用Less语法快速编译生成CSS代码
Less是一个CSS预处理器, Less文件后缀是.less
扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。
image.png
1.less计算:
+ - * 除法./或者()
1.单位没有顺序之分，如果一个表达式之中有多个单位，以第一个单位为准
2.运算符的前后，要么都加空格隔开，要么都不加
image.png
2.less嵌套：
image.png
image.png
3.Less变量
网页中, 文字文字颜色基本都是统一的， 如果网站改版，变换文字颜色，逐一修改属性值（太繁琐）
Less变量把颜色提前存储到一个容器，设置属性值为这个容器名
变量：存储数据，方便使用和修改。
语法：
定义变量：@变量名: 值；
使用变量：CSS属性：@变量名;
image.png
4.Less导入
导入: @import “文件路径”;
image.png
5.Less导出
方法一：
配置EasyLess插件， 实现所有Less有相同的导出路径
配置插件： 设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码（注意，必须是双引号）
image.png
方法二：
控制当前Less文件导出路径
Less文件第一行添加如下代码, 注意文件夹名称后面添加
注意点：
1.路径如果表示文件夹 最后一定要有/
2.属于less配置信息 一定要写在第一行 如果写在第二行 那么第一行不能再写如何内容
禁止导出：在less文件第一行添加: // out: false
压缩导出：
//compress:true
节约成本,让网页渲染的更快
如果多个配置一起写,配置与配置之间以英文逗号隔开
//compress:true,out:../css2/
