## 媒体查询： ``` @media 设置响应式 （媒介查询） @media screen and (){ //and后面必须用空格否则没用 } ``` 案例： 如果文档宽度小于 300 像素则修改背景颜色(background-color): ``` @media screen and (max-width: 300px){     body{ background-color:lightblue;     } } ``` 1.1、 大型设备（大台式电脑，1200px 起） @media screen and (min-width:1200px){ … } 1.2、中型设备（台式电脑，992px 起） @media screen and (min-width:992px){ … } 1.3、小型设备（平板电脑，768px 起） @media screen and (min-width:768px) and (max-width:900px) { … } 1.4、超小设备（手机，小于 768px） @media screen and (min-width:480px){ html {font-size: 16px; } }