2020-03-02

1. 适配问题：屏幕尺寸都是不一样的。
   m（手机）端内核：谷歌内核webkit
   解决方案：百分比布局===流式布局，非固定像素，内容向两侧填充

2. 视口
   通过设置viewport，用里面的centent值设置视口功能
   ①设置视口宽度=当前设备宽度 width=device-width
   ②不允许用户自动缩放：user-scalable=no（no/yes 0/1）
   ③设置默认缩放比例：initial-scale=1.0
   ④设置最大缩放比例：maximum-scale=1.0
   ⑤设置最小缩放比例：minimum-scale=1.0

3. 响应式：
   一个网站去兼容多个终端，而不是为每个终端做特定版本
   优点：①面对不同分辨率，设备灵活性比较高
   ②快捷解决很多设备的适应问题
   ③适合中小型网站
   缺点：
   ①因为要兼容各种设备，工作量很大，效率不高
   ②代码冗余，会出现很多隐藏无用元素，加载时间长
   原理：
   通过css3新增的媒体查询，定制某个宽度区间的网页布局
   媒体查询：
   能检测到屏幕的宽度，通过不同宽度的值，显示不同的样式

   ①超小屏幕（移动设备）：768px以下
   ②小屏屏幕（平板设备）：768px-992px
   ③中屏屏幕（标清设备）：992px-1200px
   ④大屏屏幕（宽屏设备）：1200px以上

4. 语法：@media 媒体类型 关键字 媒体特性{}

5. and 后面一定要打空格