媒体查询

所有现代浏览器都支持媒体查询，包括 Chrome，Firefox，Opera 和 Internet Explorer 9 及更高版本。

值得注意的是，orientation 媒体功能不仅限于移动设备。它基于视口的宽度和高度（不是窗口或设备）。

横向模式是视口宽度大于视口高度时的情况。

纵向模式是视口高度大于视口宽度时。

这通常转换为处于横向模式的桌面显示器，但有时可能是肖像。

在大多数情况下，移动设备将报告其分辨率，而不是由于像素密度而可能不同的实际像素大小。要强制他们报告实际像素大小，请在 head 标记内添加以下内容：

<meta name="viewport" content="width=device-width, initial-scale=1">