自适应方案

整理了各种用过的看过的自适应方案，列出了每一个的优缺点，根据情况自行选择 ，废话不多说，直接开始啦！

1. 【最常用】rem+媒体查询+居中
   我自己用的是VScode,下载cssrem插件 然后在设置里面可以调整默认根字体大小即rem和px进率，为了方便且可以有更详细的媒体查询，我把默认进率设置为100。下附我用的媒体查询，每次要写直接引入就可以。

注意：各种容器和盒子能用内容撑开的就用内容撑开，有固定宽高的话使用rem单位，配合媒体查询可以使容器大小根据页面大小自适应。最后给最外层容器添加 *margin: 0 auto;*达到页面始终居中的效果。
·优点：可以较好适应放大缩小并且不出现横向滚动条，盒子内容物可以同时自适应。
·缺点：每次写都要记得引入这个文件，有点长:D

@media screen and (min-width: 500px) {
  html {
    font-size: 30px;
  }
}
@media screen and (min-width: 600px) {
  html {
    font-size: 40px;
  }
}
@media screen and (min-width: 760px) {
  html {
    font-size: 50px;
  }
}
@media screen and (min-width: 775px) {
  html {
    font-size: 51px;
  }
}
@media screen and (min-width: 800px) {
  html {
    font-size: 52px;
  }
}
@media screen and (min-width: 825px) {
  html {
    font-size: 53px;
  }
}
@media screen and (min-width: 850px) {
  html {
    font-size: 53px;
  }
}
@media screen and (min-width: 860px) {
  html {
    font-size: 55px;
  }
}
@media screen and (min-width: 875px) {
  html {
    font-size: 57px;
  }
}
@media screen and (min-width: 900px) {
  html {
    font-size: 58px;
  }
}
@media screen and (min-width: 925px) {
  html {
    font-size: 60px;
  }
}
@media screen and (min-width: 950px) {
  html {
    font-size: 61px;
  }
}
@media screen and (min-width: 960px) {
  html {
    font-size: 62px;
  }
}
@media screen and (min-width: 975px) {
  html {
    font-size: 63px;
  }
}
@media screen and (min-width: 1000px) {
  html {
    font-size: 66px;
  }
}
@media screen and (min-width: 1025px) {
  html {
    font-size: 67px;
  }
}
@media screen and (min-width: 1050px) {
  html {
    font-size: 68px;
  }
}
@media screen and (min-width: 1075px) {
  html {
    font-size: 69px;
  }
}
@media screen and (min-width: 1100px) {
  html {
    font-size: 70px;
  }
}@media screen and (min-width: 1125px) {
  html {
    font-size: 71px;
  }
}
@media screen and (min-width: 1150px) {
  html {
    font-size: 74px;
  }
}
@media screen and (min-width: 1175px) {
  html {
    font-size: 76px;
  }
}
@media screen and (min-width: 1200px) {
  html {
    font-size: 78px;
  }
}
@media screen and (min-width: 1225px) {
  html {
    font-size: 80px;
  }
}
@media screen and (min-width: 1250px) {
  html {
    font-size: 83px;
  }
}
@media screen and (min-width: 1275px) {
  html {
    font-size: 85px;
  }
}
@media screen and (min-width: 1300px) {
  html {
    font-size: 86px;
  }
}
@media screen and (min-width: 1325px) {
  html {
    font-size: 88px;
  }
}
@media screen and (min-width: 1350px) {
  html {
    font-size: 90px;
  }
}
@media screen and (min-width: 1375px) {
  html {
    font-size: 90px;
  }
}
@media screen and (min-width: 1400px) {
  html {
    font-size: 92px;
  }
}
@media screen and (min-width: 1425px) {
  html {
    font-size: 95px;
  }
}
@media screen and (min-width: 1450px) {
  html {
    font-size: 96px;
  }
}
@media screen and (min-width: 1475px) {
  html {
    font-size: 98px;
  }
}
@media screen and (min-width: 1500px) {
  html {
    font-size: 100px;
  }
}

2. vh+vw
   vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
   vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。
   所以当我们的页面背景不是很在乎比例问题（如星空海洋），每一个页面都可以使用100vh,100vw达到始终覆盖整个可视区的效果。
   优点：简单方便
   缺点：适用范围小，不适用于比例固定的地方

3. JS resize事件
   利用JSresize事件，每次调整窗口大小都可以触发这个事件，然后在事件里面再对页面宽高进行相应设置即可，较之于vh和vw多了一些可以自己定义的东西，不会当页面宽高比例发生变化时，页面比例也发生变化。
   ·优点：可以适应屏幕宽高的变化。
   ·缺点：盒子里面的内容比较难做到自适应。

不管使用以上哪种方法，都建议不要将宽高写死，以及尽量使用弹性盒子

最后：在网页的头部可以插入以下代码，可以帮助自适应更好的实现。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放