媒体查询可以根据设备显示器特性设定CSS样式。
媒体查询语法：
1、写在样式里:
@media 条件
@media screen and (max- 550px){ /*样式*/ }
2、写在link标签里
<link rel="stylesheet" media="screen and (max-550px)" href="media.css"/>
媒体查询常用的是检测视口宽度（width）和屏幕宽度（device-width）。
试一下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>媒体查询</title> <style> body{ background-color: grey; } /*窗口< 960px*/ @media screen and (max- 960px){ body{ background: red; } } /*窗口< 768px*/ @media screen and (max- 768px) { body{ background:orange; } } /*窗口< 550px*/ @media screen and (max- 550px){ body{ background:yellow; } } /*窗口< 320px*/ @media screen and (max- 320px){ body{ background: green; } } </style> </head> <body> 改变浏览器窗口宽度，背景颜色会根据当前视口尺寸发生改变。 </body> </html>