使用window.matchMedia（）匹配多个CSS媒体查询（6）

示例 - 对响应式布局做出反应

让我们看一个更精细的例子，现在使用JavaScript来响应3列响应式布局，其中一个CSS媒体查询的范围与另一个CSS媒体查询的范围重叠，以及如何在我们的JavaScript处理函数中处理它。 当浏览器宽度为840px或更低时，以下3列布局使用普通CSS媒体查询更改为2列，而当600px或更低时，更改为单列。 这是我们将首先使用的示例页面：

3列响应式布局

通过860px和600px断点调整页面大小，以查看结构中的布局偏移。 现在，我们在每个列中都有静态文本，分别显示列的原始宽度 - “  180px ， 固定 和  190px  ”。 我们将使用JavaScript在840px和600px断点处动态更改此文本，以相应地反映列宽的变化。 结果如下：

3列响应式布局（带动态文本）

通过860px和600px断点调整新页面的大小，以查看文本更新以反映当前列状态。 为此，我们的JavaScript必须对页面CSS中使用的相同两个媒体查询做出反应：

• @media（最大宽度：840px）{}

• @media（最大宽度：600px）{}

并考虑以下3种情况：

• 当布局为840px或更低时

• 当布局为600px时

• 当布局既不是860px或更低也不是600px或更低（无响应）

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/69933200/viewspace-2653417/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/69933200/viewspace-2653417/