如何使用javascript根据用户需求触发媒体查询

Question

我有一个响应式网页，针对不同的屏幕尺寸采用不同的设计，我正在使用 @mediaquery 来更改我的设计。我想让用户能够更改设计以适应更小或更大的屏幕尺寸，即使屏幕尺寸没有改变。

是否可以在不改变屏幕大小的情况下使用 js 触发 @mediaquery ？

Answer 1

看看Enquire.js，一个用于响应 CSS 媒体查询的轻量级纯 JavaScript 库。

有了它，您可以根据屏幕的宽度将class 添加到body。然后，如果您根据主体是否具有某个类来组织您的 CSS。您可以使用 JS 根据用户的选择动态地将这些类添加到正文中。

你可以用另一个 JS 库做同样的事情：MediaClass，下面的 JS 行：

MediaClass("small-screen", "body(this-max-width: 480px)");

如果body 的宽度低于480px，则将small-screen 类添加到body 标签。现在你可以在你的网站上添加一些按钮来改变body的宽度，并且如果你以这种方式设置你的CSS类，你的页面布局将会改变，而不是“仅”基于屏幕大小。因此，对于这两种方法，您都需要稍微重构一下 CSS。