什么是媒体查询？
媒体查询又叫媒介查询，主要目的是为不同尺寸的屏幕设定不同的CSS样式。
示例代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>媒体查询</title><style>.div0{width:200px;height:150px;border:1px solid red;}@media screen and (min-device-width:100px) and (max-device-width:300px){.div0{background-color: blue;}}@media screen and (min-device-width:301px) and (max-device-width:500px){.div0{background-color: green;}}</style></head><body><div class="div0"><p>div</p></div></body></html>
当屏幕尺寸在100-300之间，301-500之间，超过500，分别对其设置样式：
