一、首先，在<head>标签下，设置<meta>标签
1 <!--设置meta标签,可以强制打开ie的edge模式--> 2 <meta http-equiv="X-UA-Compatible" content="IE=EDGE"> 3 <!--响应式自适应> 4 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
二、移动端有以下4种适配方案：
（1）伸缩布局flex
（2）流式布局 百分比
（3）响应式布局 媒体查询（超小屏设备的时候，只能流式布局）
注：以上3种适配方案的共同点：元素只能做宽度的适配（排除图片）
（4）如果宽度和高度都能做到适配的话（也就是等比缩放）rem
三、怎么适配：
1、推荐使用flexible.js
一、原理：
（1）把当前屏幕划分为10等份
e.g 一般是750的设计稿（iphone6）750px/10=75px
（2）确定当前设备的html文字大小
e.g 1rem=75px
（3）里面元素rem值：页面元素的px/75
（4）剩余的，让flexible.js去算
二、推荐开发工具：vscode
三、准备工作：
（1）设置body
body{ min-width: 320px; max-width:750px; width: 10rem; margin: 0 auto; line-height: 1.5; background-color:#f8f8f8; }
（2）限制屏幕宽度
@media screen and (min-width:750px){ html{ font-size: 75px!important; } }
（3）设置html字体大小基准值
打开设置快捷键 ctrl+逗号，在settings.json中，设计稿是多少，就改成多大的
