使用媒体查询

媒体查询（Media query）非常实用，尤其是当你想要根据设备的大致类型（如打印设备与带屏幕的设备）或者特定的特征和设备参数（例如屏幕分辨率和浏览器视口宽度）来修改网站或应用程序时。

媒体查询常被用于以下目的：

• 有条件的通过 @media 和 @import at 规则用 CSS 装饰样式。
• 用 media= 属性为<style>、<link>、<source>和其他 HTML 元素指定特定的媒体类型。如：

<link rel="stylesheet" src="styles.css" media="screen" />
<link rel="stylesheet" src="styles.css" media="print" />

• 使用Window.matchMedia() 和MediaQueryList.addListener() 方法来测试和监控媒体状态。