移动端适配
屏幕分辨率
屏幕分辨率：纵横向上的像素点数，单位是px电脑常见分辨率：1920 * 10801336 * 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.rem2.vw
rem 适配方案
认识 rem
<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属性}}
rem + flexible.js
引入flexible.js库：<body>...<script src="./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
px 转 rem
rem 单位尺寸：1. 确定基准根字号查看设计稿宽度 -> 确定参考设备宽度（视口宽度） -> 确定基准根字号（1/10的视口宽度）2. rem 单位的尺寸 = px单位数值 / 基准根字号
less
less 简介
1.简介：less是一个CSS预处理器，less文件后缀是.lessless扩充了CSS语言，使CSS具备一定的逻辑性、计算能力2.注意：a. 浏览器不识别less代码，目前阶段，网页要引入对应的CSS文件b. VS Code 插件：Easy LESS，保存less文件后自动生成对应的CSS文件c. less支持嵌套写选择器（补充：现在主流的浏览器也支持CSS嵌套写选择器了）
less 注释
单行注释：语法：// 注释内容VS Code快捷键：Ctrl + /
块注释：语法：/* 注释内容 */VS Code快捷键：（此快捷键可能与系统的截图快捷键冲突，可以自行修改）Shift + Alt + A
less 运算
.box {width: (150 / 37.5rem);
}
运算：加、减、乘直接书写计算表达式除法需要添加"()"或"."例如：width: (100 / 4px); 或者 width: (100 ./ 4px);
less 嵌套
.father {color: red;.son {width: 200px;a {color: green;// & 的代表的是当前标签，&:hover {color: blue;}}// 上面的一个a标签的代码，与下面的两个a标签代码等效a {color: green;}a:hover {color: blue;}}
}
作用：快速生成后代选择器
& 符号表示的是——当前选择器，代码写到谁的大括号里面就代表谁，不会生成后代选择器，常用于hover伪类或nth-child结构伪类
less 变量
// 1. 定义变量
// 优点：在这里修改颜色，整个网页的颜色都能立刻被修改！
@myColor:pink;// 2. 使用变量
div {color: @myColor;
}p {color: @myColor;
}a {color: @myColor;
}
作用：存储数据，方便使用和修改
语法：定义变量：@变量名:数据;使用变量：CSS属性:@变量名;
less 导入
@import "./base.less"@import "./common.less"
作用：导入less公共样式文件语法：@import "文件路径"提示：如果是less文件可以省略后缀例如：@import "./base.less"@import "./common" // 此处省略了后缀
less 导出
// out: ./css/index.css
导出写法：在less文件的第一行添加：// out: 文件URL禁止导出：在less文件的第一行添加：// out:false
vw 适配方案
认识 vw
vw 是一个单位，而且是一个相对单位，相对于"视口的尺寸"计算结果vw：viewport width1 vw = 1/100 视口宽度vh：viewport height1 vh = 1/100 视口高度vw 和 vh 是相对视口的宽高计算结果，可以直接实现移动端适配效果！！记忆：因为 1 vw = 1/100 视口宽度，即相当于视口宽度（屏幕）的 1%
px 转 vw
1. 确定设计稿对应的vw尺寸（1/100视口宽度）查看设计稿宽度 -> 确定参考设备宽度（视口宽度）-> 确定vw尺寸（1/100视口宽度）2. vw单位的尺寸 = px数值 / （1/100 视口宽度）
vh 单位问题
在开发中，vw 和 vh 不能混用!vh 是 1/100 视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。实际开发中，通常使用vw，特殊情况用vh，但是不能同时使用！
 动态修改追踪的实体、动态查询)
,64位VB6 vb7)
![[讲座] - 闲聊工业设计](http://pic.xiahunao.cn/[讲座] - 闲聊工业设计)