一、屏幕适配
前言
说明：
因为手机屏幕尺寸大小不一，利用绝对单位px，会出现，随着手机屏幕的放大缩小，里面的元素大小会保持不变，所以屏幕小的手机会出现”一行只能放一个元素的效果“，而屏幕大的手机则因屏幕大可以多放几个，这样也就会导致布局不方便，还会影响大家的体验。
解决方案：
- 相对单位vw/vh
- 相对单位”rem“
- 媒体查询
- flexible.js
效果：
屏幕适配公式（重点）：
要适配的元素的宽度 / 屏幕的宽度 = 设计稿中元素的宽度 / 设计稿宽度。
这条公式是这么得到的：
vw/vh
介绍：
vw/vh:
1、是相对长度单位；
2、相对于视口（移动端屏幕）的宽度/高度；这两个单位被赋予了绝对功能。如下：
100vw=移动端屏幕的宽度，
100vh=移动端屏幕的高度。
为什么要用vw/vh而不用px呢？
答：px是像素单位，它是随屏幕的变大缩小而增加或减少的，就好比如375px宽的移动端和750宽的移动端；很明显的区别，一个是375而另一个是750。那我一个元素有固定的像素值，那元素在宽的移动端上不就因为，屏幕px多，而变得可以多放几个吗？这就会导致布局错乱。而vw/vh是相对单位，不管屏幕大或小，它始终把屏幕分为100份（vw/vh），然后经过换算公式把元素所占屏幕宽度的比例份数计算出来，让元素始终保持这个比例在屏幕上显示。
作用：
算出元素的宽占比，让他始终保持这个比例在不同屏幕上显示，从而达到随屏幕放大缩小而放大缩小。
原理：
把屏幕宽或高的像素平均分为100份，1vw就等于1份的宽，也就是说屏幕越大的手机1vw所占的像素px也就越多。
已知a、b、y(100vw)。
根据公式：要适配的元素的宽度(x)vw / 屏幕的宽度(y)vw = 设计稿中元素的宽度(a)px / 设计稿宽度(b)px。计算得出适配元素的宽度(x)vw。所以既有了适配元素的宽度(x)vw,又已知100vw等于屏幕宽度，那么不管移动端屏幕大小再怎么变，适配元素的大小就占那么多份，适配元素的大小也会随着它变，从而不影响布局。
使用方法
根据换算公式，计算出相应的vw数值替换掉px值就可。
辅助插件（px2vw）
作用：
输入像素值（px），自动计算出vw数值，提升代码书写速度。
安装步骤：
注意：
根据设计稿宽度的不同，要去vsc设置中修改设计稿的宽度。
rem
介绍：
- 相对单位（原理和vw类似）
- rem单位是相对于HTML标签的字号计算结果
- 1rem = 1HTML字号大小---（html字号大小是自己设置的，值设置为屏幕宽度的1/10）
- 根据公式：要适配的元素的宽度x(rem) / 屏幕的宽度y(10rem) = 设计稿中元素的宽度a(px) / 设计稿宽度b(px),能得出适配的元素的宽度x(rem)--和上面同理。
**缺点：**html字号大小需要手动设置（固定的），那么随着屏幕大小不同、屏幕分辨率不同，固定的字号大小就满足不了”值设置为屏幕宽度的1/10的条件，所以就形成不了屏幕适配的功能。
**思考：**手机屏幕大小不同，分辨率不同， 如何设置不同的HTML标签字号？ 答：媒体查询。
媒体查询
介绍：
媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式；
当某个条件成立, 执行对应的CSS样式。
用法：
媒体特性：移动端屏幕宽度。@media screen and（）和@media （）作用相同。
-
固定尺寸
-
指定区间
小于或等于300px的移动端
小于或等于300px的移动端
大于400px小于800px的移动端
**优点：**我们可以利用媒体查询，为需要用到的移动端屏幕设置相应的HTML字号大小，那么就可以达到部分屏幕适配的功能。
**缺点：**移动端设备多，屏幕大小不一，需要设置多个媒体查询，不方便。
据此，手淘团队开发出了flexible.js用于解决这个问题。
flexible.js（开发团队-手淘）
介绍：
flexible.js是手淘开发出的一个用来适配移动端的js框架。
核心原理：
核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。
用法：
- 在网上下载flexible.js代码；
- 存入需要用到的根目录下；
- 引入：
辅助插件（px to rem & rpx (cssrem)）
作用：
输入像素值（px），自动计算出rem数值，提升代码书写速度。
安装步骤：
**注意：**添加的代码"cssrem.rootFontSize"属性值为：依设计稿宽度而得出的HTML字号大小。
vw/vh与rem的比较
“calc（）”:
作用：
让css样式具备计算功能。
用法：
注意：
1、括号不能忘记了。
2、运算符两侧必须加“空格”。
拓展：
3.
