响应式所具有的特点：
1.网页的宽度自动调整
2.尽量少用绝对宽度
3.字体要使用rem、em做为单位
4.布局要是用浮动、弹性布局
@规则
@chartset 定义编码
@import 引入css文件（css模块化）
@font-face 自定义
@keyframes animation里的关键帧
@media 媒体查询
媒体查询：基于一个或多个基于设备类型、具体特点和环境阿里应用样式
@media
1.媒体类型
2.媒体特性
3.逻辑运算符
媒体查询：
all 所有设备
print 打印机设备
screen 彩色的电脑屏幕
speech听觉设备（针对有视力障碍的人士，可以把页面的内容以语音的方式呈现的设备）
注意：tty、tv、projection、handheld、braille、embossed、aural等几种类型在媒体查询4中已经废弃
媒体特性：
width 宽度
min-width 最小宽度，宽度只能比这个大
max-width 最大宽度，宽度只能比这个小
height 高度
min-height 最小高度，高度只能比这个大
max-height 最大高度，高度只能比这个小
orientation 方向
landscape 横屏（宽度大于高度）
portrait 竖屏（高度大于宽度）
aspect-ratio 宽度比
-webkit-device-pixel-ratio 像素比（webkit内核的私有属性）
逻辑运算符： 用来做条件判断
and 合并多个媒体查询（并且的意思）
, 匹配某个媒体查询（或者的意思）
not 对媒体查询结果取反
only 仅在媒体查询匹配成功后应用样式（防范老旧浏览器）