移动适配
rem ： 目前多数在用的解决方案
rem是相对单位
rem单位是相对于HTML标签的字号计算结果
1rem = 1HTML字号大小
思考:
手机屏幕大小不同，分辨率不同， 如何设置不同的HTML标签字号？
· 媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
@media (媒体特性){
选择器{
css属性
}
}
@media (width:320px){
html{
font-size:32px
}
}
目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10
rem单位尺寸
- 根据视口宽度，设置不同的HTML标签字号
- 书写代码，尺寸是rem单位
3.确定设计稿对应的设备的HTML标签字号
查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
-
rem单位的尺寸
N * 37.5 = 68 → N = 68 / 37.5
rem单位的尺寸 = px单位数值 / 基准根字号
flexible
flexible js配合rem实现在不同宽度的设备中，网页元素可以实现尺寸等比缩放效果
<script src="./js/flexble.js"></script>
vw / vh：未来的解决方案
相对单位
相对视口的尺寸计算结果
vw：viewport width 1vw = 1/100视口宽度
vw单位尺寸
- 确定设计稿对应的vw尺寸 （1/100视口宽度）
查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 （1/100 视口宽度）
- vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )
vh：viewport height 1vh = 1/100视口高度
vh单位尺寸
- 确定设计稿对应的vh尺寸 （1/100视口高度）
查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定vh尺寸 （1/100 视口高度）
- vh单位的尺寸 = px单位数值 / ( 1/100 视口高度 )
Less
因为CSS不支持计算写法，可以通过Less实现。
1.使用Less语法可以快速编译生成CSS代码
2.Less是一个CSS预处理器, Less文件后缀是 .less
3.扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。
less存在多个单位以第一个单位为准；
.box{
width:100+50px; //加法运算
width:100-50px; //减法运算
width:100*4px; //乘法运算
width:100./4px; //除法运算
}
快速生成后代选择器。
.父级选择器{
.子级选择器{
}
&::after{
//伪类前面加&
}
&:hover{
}
}
可以把颜色提前存储到一个容器，设置属性值为这个容器名
@fontcolor:pink
.box{
color:@fontcolor
}
能够使用Less导入写法引用其他Less文件
@import'base.css';
使用Less语法导出CSS文件
方法一：
配置EasyLess插件， 实现所有Less有相同的导出路径
配置插件： 设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码（注意，必须是双引号)
方法二：
控制当前Less文件导出路径
Less文件第一行添加如下代码, 注意文件夹名称后面添加 /
//out: ./css/
禁止导出
在less文件第一行添加: // out: false
// out: false
