1.根据window.screen.width获取当前浏览器的宽度，然后根据宽度加载不同的样式文件；
<script>
if(window.screen.width>=1680) {
document.write('<link rel="stylesheet" href="css/index1.css"')
} else if (window.screen.width >= 1600) {}
</script>
注意：这里的script一定要写在head标签里面，这样在加载页面的之前，会先把css文件加载出来；
2.媒体查询：根据设备显示器的特性为其设定样式，媒体查询右媒体类型和一个或多个检测媒体特性的条件表达式组成；可以根据不同的媒体类型定义不同的样式，常用于区分pc跟mobile端内容；
缺点：1.有局限性，只能适应主流的宽高，2.要匹配足够多的屏幕大小，工作量大
优点：能够适应pc和移动端，只要有足够多的耐心，效果可以尽可能达到完美；
mediatype类型：all（用于所有的设备），print（用于打印机和打印浏览），screen（用于电脑屏幕、平板电脑、手机等）；
关键字：and（且的意思），not（排除某个媒体类型），only（指定某个特定的媒体类型）；
media feature媒体特性，必须用小括号包着，width（定义页面可见的宽度），min-width（定义页面可见的最小宽度），max-width（定义页面可见的最大宽度）；
link中的css媒体查询：<link rel="stylesheet" media="(max-width: 800px)" href="index.css" />
在css文件中的写法：
@media only screen and (min-width: 1200px) {样式}
@media only screen and (min-width: 992px) and (max-width:1199px) {样式}
3.rem布局（移动端）：rem会随着根元素字体大小的变化而变化
-
媒体查询+rem布局：媒体查询动态修改根元素的大小，使得rem一直跟着变化，响应式就成功了
@media only screen and (min-width: 600px) {html{font-size: 16px;}}
-
vw+vh+rem屏幕适配方案：可以把宽高的单位设置成vw和vh，使用rem做单位；
-
meta标签：视口跟设备宽度保持一致，默认缩放比例为1，不允许用户自行缩放，最大允许缩放比例为1，最小允许缩放比例为1；
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />