-
移动适配
1.长度单位
网页效果
屏幕宽度不同，网页元素尺寸不同（等比缩放）
px单位或百分比布局可以实现吗？
px单位是绝对单位
百分比布局特点宽度自适应，高度固定
适配方案
rem ：目前多数企业在用的解决方案
vw/vh：未来的解决方案
rem单位: 相对单位
rem单位是相对于HTML标签的字号计算结果
1rem = 1HTML字号大小
2.媒体查询
思考:
手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？
解决方案: 媒体查询
媒体查询能够检测视口的宽度，然后编写差异化的CSS 样式
当某个条件成立, 执行对应的CSS样式
语法:
例子:
视口宽度要去浏览器检查html的宽度,检查的宽度是多少就写多少
3.rem移动适应
设备宽度不同，HTML标签字号设置多少合适？
设备宽度大，元素尺寸大
设备宽度小，元素尺寸小
目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的1/10
适配移动端过程：
- 要利用媒体查询规定不同的屏幕宽度设置不同的根字号大小；屏幕宽度的1/10
- 页面元素就可以使用rem相对单位，1rem=1html文字大小
rem单位尺寸
- 根据视口宽度，设置不同的HTML标签字号
- 书写代码，尺寸是rem单位
2.1 确定设计稿对应的设备的HTML标签字号
查看设计稿宽度→确定参考设备宽度(视口宽度)→确定基准根字号（1/10视口宽度）
2.2 rem单位的尺寸
rem单位的尺寸=px单位数值/基准根字号
4.flexible
思考：检测了3个视口，需要分别设置相应的根字号，有什么弊端吗？
答：手机设备多，屏幕尺寸不一，视口不仅仅有这3个
解决方案: 使用flexible js配合rem可以实现在不同宽度的设备中，网页元素尺寸等比缩放效果
介绍:
flexible.js是手淘开发出的一个用来适配移动端的js框架。
核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。
使用方法:
-
less语法
思考：在px单位转换到rem单位过程中，哪项工作是最麻烦的？
答：除法运算。CSS不支持计算写法。
解决方案：可以通过Less实现。
Less是一个CSS预处理器, Less文件后缀是.less
扩充了CSS 语言, 使CSS具备一定的逻辑性、计算能力。
注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。
Easy Less:
vscode插件
作用：less文件保存自动生成css文件
注意: 有重大语法错误不会生成css文件
用法: 安装插件后直接新建后缀名为.less的文件即可
1.注释
单行注释
语法：//注释内容
快捷键：ctrl+/
块注释
语法：/* 注释内容*/
快捷键：shift+alt+A
注意:
单行注释，不会编译到css文件中的
块注释，是会编译在css中
2.计算
语法:
例子:
3.嵌套
后代选择器:
子代选择器:
交集选择器:
并集选择器:
伪类选择器:
添加伪元素:
结构伪类选择器:
4.变量
语法:
5.导入
语法:
6.导出
默认情况下,less导出的css文件和less文件处于同一个文件夹中
想分离的可以利用导出语法
语法:
注意:
上面的语法只是设置当前less文件导出,要所有less文件都导出要设置easy less插件
设置easy less插件: 实现所有Less文件有相同的导出路径
设置→搜索EasyLess→在setting.json中编辑→添加代码（注意，必须是双引号）
代码:
"out":"../css/"
7.禁止导入
不是所有less文件都需要导出为css文件的,可以设置禁止导出,在less文件第一行添加: //out: false
8.压缩导出
语法:
// compress:true
作用: 节约成本，让网页渲染的更快
注意: 如果多个配置一起写，配置与配置之间以英文逗号隔开
例如: // compress:true,out:../css2/
-
补充
1.单词
2.每日一句鼓励自己的话：
努力的最大动力，在于你可以选择你想要的生活，而不是被生活选择。
