自适应和响应式
1、自适应：根据不同的设备大小来自动调整尺寸、大小
2、响应式：会随着屏幕的实时变动而自动调整，是一种自适应；
移动端视口
能看到的区域就是视口。viewport
fixed就是相对于视口来进行定位的。
在PC端视口就只有一个，不需要对视口进行区分。布局视口和视觉视口就是同一个。
<meta name="viewport" content="width=device-width,initial-scale=1.0"
meta中，是禁止在移动端进行等比例缩放。pc端页面在移动端等比例缩放之后，字太小了，看不清。
布局视口
移动端的布局视口，可不是视觉视口【就是显示页面的区域】
移动端的布局视口980px，我们写的像素如果是100px，那么到视觉视口中会等比例缩放的。但是还是显示100px
所以我们要改变布局视口的大小
设置布局视口的宽度
<meta name="viewport" content="width=200px"
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalabel=no,maximum-scale=1.0,minimum-scale=1.0">
initial-scale：定义设备宽度与viewport大小之间的缩放比例
maximum-scale 定义缩放的最大值
minimum-scale 定义缩放的最小值
user-scalable yes/no 将无法缩放当前页面
将布局视口设置为视觉视口之后，就不会等比例缩放了。100px在哪里都是100px，是一个绝对单位。
适配方案
1、百分比设置
因为不同属性的百分比设置，相对的可能是不同的参照物，所以百分比往往比较难统一。
所以百分比在移动端适配中使用是比较少的；
2、rem单位+动态的html的font-size
3、vw单位
4、flex的弹性布局
媒体查询，动态设置font-size
<style>
@media screen adn (min-width:375px){
html{
font-size:24px;
}
}
@media screen adn (min-width:441px){
html{
font-size:28px;
}
}
</style>
rem的font-size尺寸
可以通过媒体查询设置不同尺寸范围的html的font-size尺寸
缺点：
1、我们需要针对不同的屏幕编写大量的媒体查询
2、我们如果动态改变尺寸，不会实时的进行更新【范围超出到另外一个阶梯时，才会发生变化】
js动态计算font-size
<script>
const htmlEl = document.documentElement;
function setFontSizeUnit () {
const htmlWidth = htmlEl.clientWidth;
const htmlFontSize = htmlWidth / 10;
htmlEl.style.fontSize = htmlFontSize + "px";
}
setFontSizeUnit();
//页面调整
window.addEventListener("resize",setFontSizeUnit);
//页面后退前进
window.addEventListener("pageShow",function (e) {
if(e.persisted){
setFontSizeUnit();
}
})
</script>
lib-flexible库
Rem单位换算
1、手动换算
2、less/sass
index.less
.pxToRem(@px){
return: 1rem * (@px / 37.5);
}
.box{
width: .pxToRem(100)[result]
}
3、postcsss-pxtorem
4、借助vscode插件
VW换算
1vm==屏幕的1/100
与rem做对比
1、rem事实上是作为一种过度的方案，它利用的也是vw的思想
2、不管是自己写的js，还是flexible的源码，都是将1rem等同于设计稿的1/10，在利用1rem计算，相对于整个尺寸的大小。
VM的优势
1、不需要动态计算html的font-size的大小，所以也不会去依赖
2、更加语义化。可以具备rem的所有优点。
VW的换算过程
设计给的375的设计稿 1vw=3.75px
.box{
width:calc(100/275) vw;
}
