移动端适配概念
移动端适配的方案：
1.百分比单位；
2.vw 和 vh
3.媒体查询 + rem;
注意：不能使用px作为移动端适配的单位。
在高清屏下，1个css像素 1px 所占用的物理像素点是动态变化的，在高清屏中，同样是100px，此时
1px只是占用的像素点更多了而已。因此不管切换到什么样式的屏幕尺寸下，100px始终看起来就是
那么大，所以px不能作为适配单位。
物理像素：(设备像素)：一个设备的屏幕是由一个一个的小像素点组成的，设备出场时，屏幕有多
少个像素点构成是一定的
逻辑像素：(逻辑像素 css像素)：px，它是我们前端开发使用的一个单位
手机屏幕分为1倍屏，2倍屏，3倍屏
1倍屏：1px的css像素，对应1个物理像素点
2倍屏：1px的css像素，对应2个物理像素点
移动端适配方案(rem+@media)
1.假设设计稿尺寸为 375px,我们将屏幕尺寸分为若干份，比如10份，
12份，15份，20份等。然后设置html的font-size,比如375px,评分15份，一份为25px,即html(font-
size:25px)
2. 假设设计稿尺寸为：375px,将设计稿中元素的尺寸转换为rem。虽然其他尺寸下元素的rem没有
变化，但是html的font-size是根据媒体查询在动态变化的，所以最终计算出来元素的尺寸也是动态
变化的。
px 换算 rem ：安装插件 px to rem & rpx(cssrem)
设置基准为font-size:375px/15等份
视口
name="viewport" :表示视口标签
width=device-width：布局宽度 = 设备宽度
initial-scale=1.0：初始缩放比例，页面一打开按照原本的大小展示
maximum-scale = 1.0:最大缩放比
minimum-scale=1.0:最小缩放比
meta视口标签的主要作用：让布局视口的宽度和设备宽度保持一致，形成理想视口，
简单就是设备有多宽，布局视口就有多宽
