-
移动适配
1.长度单位
网页效果
屏幕宽度不同，网页元素尺寸不同（等比缩放）
px单位或百分比布局可以实现吗？
px单位是绝对单位
百分比布局特点宽度自适应，高度固定
适配方案
rem ：目前多数企业在用的解决方案
vw/vh：未来的解决方案
rem单位: 相对单位
rem单位是相对于HTML标签的字号计算结果
1rem = 1HTML字号大小
2.媒体查询
思考:
手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？
解决方案: 媒体查询
媒体查询能够检测视口的宽度，然后编写差异化的CSS 样式
当某个条件成立, 执行对应的CSS样式
3.rem移动适应
设备宽度不同，HTML标签字号设置多少合适？
设备宽度大，元素尺寸大
设备宽度小，元素尺寸小
目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的1/10
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的文件即可
嵌套
后代选择器
子代选择器
交集选择器:
并集选择器:
伪类选择器:
