屏幕分辨率：纵横向上的像素点数，单位是px
电脑常见分辨率：
1920 * 1080
1336 * 768
...
硬件分辨率 -> 物理分辨率（出厂设置）
缩放调节后的分辨率 -> 逻辑分辨率（软件/驱动设置）
<meta name="viewport" content="width=device-width, initial-scale=1.0">
视口：显示HTML网页的区域，用来约束HTML的尺寸
width=device-width <==> 视口宽度=设备宽度（即设备逻辑分辨率的宽度）
initial-scale=1.0 <==> 缩放1倍（即不缩放）
概念：设计稿里面每个元素的尺寸都是2倍
作用：防止图片
举例：网页需要一个100px的图片，设计稿就画一个200px的图片，在小屏幕显示100px，在大屏幕显示就100px~200px
宽度适配：宽度自适应
1.百分比布局
2.Flex布局
等比适配：宽高等比缩放
1.rem
2.vw
<style>
* {
margin : 0;
padding : 0;
}
html {
font-size : 30px;
}
.box {
width : 5rem;
height : 3rem;
background-color : pink;
}
</style>
<body>
<div class="box" ></div>
</body>
rem 单位，是相对单位
rem 单位是相对于HTML标签的字号计算结果
1 rem = 1 HTML字号大小
目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的1/10
<style>
@media ( width : 375px) {
body {
background-color : green;
}
}
</style>
1.什么是"媒体查询" ：
不同手机屏幕大小不同，分辨率不同，通过"媒体查询" 我们可以设置不同的HTMl标签字号，让HTML标签字号大小动态变化，rem也就随之动态变化
2.具体内容：
媒体查询能够检测视口的宽度，然后编写差异化的CSS样式
当某个条件成立，执行对应的CSS样式
3.格式：
@media ( 媒体特性) {
选择器 {
CSS属性
}
}
引入flexible.js库：
< body> < scriptsrc = " ./js/flexible.js" > </ script> </ body> <style>
* {
margin : 0;
padding : 0;
}
.box {
width : 5rem;
height : 3rem;
background-color : pink;
}
</style>
<body>
<div class="box" ></div>
<script src="./js/flexible.js" ></script>
</body>
flexible.js 是某团队开发出来的一个专门用来适配移动端的js库
核心原理：根据不同的视口宽度，给网页中HTML根节点设置不同的font-size
rem 单位尺寸：
1. 确定基准根字号
查看设计稿宽度 -> 确定参考设备宽度（视口宽度） -> 确定基准根字号（1/10的视口宽度）
2. rem 单位的尺寸 = px单位数值 / 基准根字号
1.简介：
less是一个CSS预处理器，less文件后缀是.less
less扩充了CSS语言，使CSS具备一定的逻辑性、计算能力
2.注意：
a. 浏览器不识别less代码，目前阶段，网页要引入对应的CSS文件
b. VS Code 插件：Easy LESS，保存less文件后自动生成对应的CSS文件
c. less支持嵌套写选择器（补充：现在主流的浏览器也支持CSS嵌套写选择器了）
单行注释：
语法：
// 注释内容
VS Code快捷键：
Ctrl + /
块注释：
语法：
/* 注释内容 */
VS Code快捷键：（此快捷键可能与系统的截图快捷键冲突，可以自行修改）
Shift + Alt + A
.box {
width: (150 / 37.5rem);
}
运算：
加、减、乘直接书写计算表达式
除法需要添加"()" 或"."
例如：
width : ( 100 / 4px) ; 或者 width : ( 100 ./ 4px) ;
.father {
color: red;
.son {
width: 200px;
a {
color: green;
// & 的代表的是当前标签，
&:hover {
color: blue;
}
}
// 上面的一个a标签的代码，与下面的两个a标签代码等效
a {
color: green;
}
a:hover {
color: blue;
}
}
}
作用：快速生成后代选择器
& 符号表示的是——当前选择器，代码写到谁的大括号里面就代表谁，不会生成后代选择器，常用于hover伪类或nth-child结构伪类
// 1. 定义变量
// 优点：在这里修改颜色，整个网页的颜色都能立刻被修改！
@myColor:pink;
// 2. 使用变量
div {
color: @myColor;
}
p {
color: @myColor;
}
a {
color: @myColor;
}
作用：存储数据，方便使用和修改
语法：
定义变量：@变量名:数据;
使用变量：CSS属性:@变量名;
@import "./base.less"
@import "./common.less"
作用：
导入less公共样式文件
语法：
@import "文件路径"
提示：
如果是less文件可以省略后缀
例如：
@import "./base.less"
@import "./common" // 此处省略了后缀
// out: ./css/index.css
导出写法：
在less文件的第一行添加：
// out: 文件URL
禁止导出：
在less文件的第一行添加：
// out:false
vw 是一个单位，而且是一个相对单位，相对于"视口的尺寸"计算结果
vw：viewport width
1 vw = 1/100 视口宽度
vh：viewport height
1 vh = 1/100 视口高度
vw 和 vh 是相对视口的宽高计算结果，可以直接实现移动端适配效果！！
记忆：
因为 1 vw = 1/100 视口宽度，即相当于视口宽度（屏幕）的 1%
1. 确定设计稿对应的vw尺寸（1/100视口宽度）
查看设计稿宽度 -> 确定参考设备宽度（视口宽度）-> 确定vw尺寸（1/100视口宽度）
2. vw单位的尺寸 = px数值 / （1/100 视口宽度）
在开发中，vw 和 vh 不能混用!
vh 是 1/100 视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。
实际开发中，通常使用vw，特殊情况用vh，但是不能同时使用！
