一、首先，在<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中，設計稿是多少，就改成多大的
