移动适配
定义：移动适配是指使不同尺寸的手机设备页面“相对性的达到合理的展示（自适应）”或者“保持统一效果的等比缩放。
px和百分比的区别
px（像素）
- px是绝对长度
- 单位是固定，宽高或者位置不改变
百分比
- 百分比是相对长度
- 是参照其他的物体的变化而发生变化，比如当父元素宽高或者位置发生变化的时候，如果想要子元素的宽高或者位置也随之发生变化，就应该使用百分比
总结
首先先想清楚页面的需求是什么，是希望定死宽高或者位置，那就用px；
如果不希望定死宽高或者位置，想随着其他物体的位置发生变化就应该使用百分比
拓展
img图片经常使用的单位 百分比单位或者vw单位
vw
定义以及作用
- 相对长度单位（需要找参照物）
- 相对屏幕的宽度
- 100vw=屏幕的宽度；100vh=屏幕的高度
- 作用：移动端的屏幕适配（换句话来说，就是手机屏幕越大，看见的元素就越大；相反手机屏幕越小，看见的元素就越小。实现在不同宽度的设备中，网页元素尺寸等比缩放效果）
原理
总结：要适配的元素的宽度=屏幕的宽度*设计稿中元素的宽度/设计稿宽度
如何使用vw实现屏幕适配
calc（计算的缩写）：可以在不同单位进行运算，calc加减乘除都可以，注意运算符两侧必须要加空格
代码案例
<title>vw移动适配和calc的体验</title>
<style>
/* 要适配的手机中的div的宽度=要适配的手机屏幕（100vw）*设计稿中div的宽度/设计稿的宽度 */
div {
width: 26.6667vw;
height: calc(100vw * 50px / 375);
background-color: pink;
}
.two {
width: calc(100vw * 200px / 375);
height: calc(100vw * 80px / 375);
background-color: yellowgreen;
}
</style>
</head>
<body>
<div>1</div>
<div class="two">2</div>
</body>
在vscode中安装vw插件
好处：可以自动计算出多少的vw
操作步骤如图所示：
添加的代码
"px2vw.width": 375, （添加的位置是随便找个逗号的位置后面按回车放此代码即开）
vh
定义以及作用
- 相对长度单位（需要找参照物）
- 相对屏幕的高度
- 100vh=屏幕的高度
- 作用：移动端的屏幕适配（换句话来说，就是手机屏幕越大，看见的元素就越大；相反手机屏幕越小，看见的元素就越小。实现在不同宽度的设备中，网页元素尺寸等比缩放效果）
注意点
开发中，vw不会和vh混用，因为 vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。
rem
定义
-
相对长度单位 （找到参照物）
-
参照的根标签（html）的fontsize
-
如果自己不设置html的字体大小
1rem=16px （谷歌浏览器默认的字体大小是16px）
-
如果设置了html的字体大小是1px
1rem=1px
-
总结：a. 1rem大小是相对于页面根标签的字体大小
b. 不要研究rem小于12的时候的情况，自己设置尽可能讲rem设置为大于等于12，避免问题即开
原理
屏幕宽度和html的字体大小关系
10倍根标签的字体大小=屏幕宽度
根标签的字体大小=1rem
10rem=10倍根标签的字体大小=屏幕宽度
总结：10rem=屏幕宽度
公式 ：要适配的元素的宽度=屏幕的宽度设计稿中元素的宽度/设计稿宽度*
如何使用rem实现屏幕适配
代码案例
<title>rem-实现屏幕适配</title>
<style>
div {
width: 2.6667rem;
height: calc(100vw * 50px / 375);
background-color: pink;
}
.two {
width: calc(100vw * 200px / 375);
height: calc(100vw * 80px / 375);
background-color: yellowgreen;
}
</style>
</head>
<body>
<div>1</div>
<div class="two">2</div>
</body>
学习引入手机淘宝写好的js 代码 （flexible.js）
好处就是屏幕的宽度改变-html的字体大小也发生改变
<title>根据屏幕的宽度来改变html根标签的字体大小</title>
</head>
<body>
<script src="./flexible.js"></script>
</body>
在vscode中安装rem插件
操作如图所示
添加的代码
"cssrem.rootFontSize": 37.5,
