rem适配
目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果
rem和px的不同：
rem: 网页元素尺寸单位,可以根据屏幕宽度的不同，实现网页元素尺寸不同（等比缩放）
px: 属于绝对单位，不会根据屏幕宽度不同而等比缩放
目标的实现方法：
1，rem：是目前多数企业在用的解决方案
2，vw / vh：未来的解决方案
rem单位：
1，相对单位
2，rem单位是相对于HTML标签的字号计算结果
3，1rem = 1HTML字号大小
rem单位尺寸：
- 根据视口宽度，设置不同的HTML标签字号
- 书写代码，尺寸是rem单位
2.1 确定设计稿对应的设备的HTML标签字号
查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
2.2 rem单位的尺寸
N * 37.5 = 68 → N = 68 / 37.5 （移动设备宽度375px）
rem单位的尺寸 = px单位数值 / 基准根字号
rem.jpg
rem移动适配 - 媒体查询
目标：媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
写法：
@media （媒体特性） {
选择器 {
css属性
}
}
@media (width:375px) {
html {
font-size: 37.5px;
}
}
由于移动设备很多，无法每个通过媒体查询一个一个写出来
所以使用flexible.js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果
flexible.js是手淘开发出的一个用来适配移动端的js框架。
核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。
less
Less是一个CSS预处理器, Less文件后缀是.less;
扩充了CSS 语言, 使CSS具备一定的逻辑性、计算能力。
注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。
如何使用Less语法快速编译生成CSS代码
Easy Less：
1，vscode插件
2，作用：less文件保存自动生成css文件
less语法
一，注释
单行注释
语法：// 注释内容
快捷键：ctrl + /
块注释
语法：/* 注释内容 */
快捷键： shift + alt + A
二，运算
加、减、乘直接书写计算表达式
除法需要添加 小括号
注意点：
1,单位没有顺序之分,如果一个表达式之中有多个单位,以第一个单位为准
2,运算符的前后,要么都加空格隔开,要么都不加
三，嵌套
嵌套写法：
1.生成后代选择器
.box {
width: 200px;
height: 200px;
.title {
background-color: #ff0;
.left {
margin-left: 100px;
}
}
}
2.生成子代选择器 >
.father {
background-color: aqua;
> .son {
background-color: orange;
> .sun {
background-color: red;
}
}
}
3.交集选择器 &符号指代的是直接上级
.box {
background-color: #ff0;
&.box1{
background-color: aqua;
}
}
4.并集选择器
.box {
&,.box1{
background-color: red;
}
}
5.伪类选择器 :hover
.box {
a:hover {
background-color: #ff0;
}
a {
&:hover {
background-color: #ff0;
}
}
li:hover {
a {
background-color: #ff0;
}
}
li {
&:hover {
a {
background-color: #ff0;
}
}
}
}
6.添加伪元素
.box {
img::before {
content: '';
}
img {
&::before {
content: '';
}
}
}
7.结构伪类选择器 直接写在选择器的后面是没有提示的
.box {
li:first-child {
margin: 0 auto;
}
li {
&:first-child {
margin: 0 auto;
}
}
}
四，变量
变量 @变量名: 值;
作用：节约维护成本
变量名看做是一个存值的容器
写法：
@themeColor: blue;
body {
background-color: @themeColor;
}
.header {
background-color: @themeColor;
p {
background-color: @themeColor;
}
a {
background-color: @themeColor;
}
}
五，导入
写法：
@import url(你要导入的文件路径);
@import '你要导入的文件路径';
六，导出
// out: ../css/
注意点:
1,路径如果表示文件夹,结尾一定要有/
2,属于less配置信息,一定要写在第一行,如果写在第二行,那么第一行不能再学任何内容
七，压缩导出
语法：
// compress:true
作用：节约成本,让网页渲染的更快
// compress:true,out:../css2/
注意：如果多个配置一起写,配置与配置之间以英文逗号隔开
