就业班移动web第五天
一、移动适配 rem
移动web端目前主流解决方案（ren)，可根据不同类型的屏幕，让网页元素等比缩放！
rem的单位：相对单位，rem单位是相对于HTML标签的字号计算结果
1rem = 1HTML字号大小
rem移动适配 - 媒体查询
媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
以视口宽度为375px为例 我们使用媒体查询
@media (width: 375.2px) {
html {
/* 1html 根字号 37.5px = 视口宽度的 1/10 */
font-size: 37.5px;
}
}
适配移动端过程：
1.要利用媒体查询规定不同的屏幕宽度设置不同的根字号大小；屏幕宽度的1/10
2.页面元素就可以使用rem相对单位，1rem=1html文字大小
flexible（手淘开发出的一个用来适配移动端的js框架）
核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。
写法法：插入js文件 标签 script 已经根据不同的视口宽度设置了不同的html根字号的大小
二、less （css里面的一种语法）
Less是一个CSS预处理器, Less文件后缀是.less，扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
ps:浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。
less运算写法可以完成px单位到rem单位的转换
需要添加vscode插件Easy Less，ess文件保存自动生成css文件。
- 单行注释 语法:// 注释内容 快捷键:ctrl + /
2.块注释 语法:/* 注释内容 */ 快捷键:shift+alt+A
一、less运算写法
加减乘除法./或者()
注意点：
1.单位没有顺序之分，如果一个表达式之中有多个单位，以第一个单位为准
2.运算符的前后，要么都加空格隔开，要么都不加
二、Less嵌套写法生成后代选择器
1.生成后代选择器
2.生成子代选择器
3.交集选择器 &符号指代的是直接上级
4.并集选择器
5.伪类选择器 :hover
6.添加伪元素
7.结构伪类选择器
直接写在选择器的后面是没有提示的
8.变量
@变量名: 值; 大大节约维护成本。
变量名看做是一个存值的容器，给需要的标签添加类名
9.导入
@import "你要导入的文件路径";
例如：@import url(./03-计算.less);
less文件导入只能导入.less文件
10.导出
out: ../css/
注意：
1.属于less配置信息，一定要写在第一行，如果写在第二行，那么第一行不能再写任何内容
2.路径如果表示文件夹，最后一定要有/
11.禁止导出
out: false
12.压缩导出（节约成本，让网页渲染的更快)
compress:true,out:../css2/
注意：如果多个配置一起写，配置与配置之间以英文逗号隔开
