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

Question

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

是否可以使用js触发@mediaquery而不改变其大小？

Answer 1

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

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

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

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

如果small-screen的宽度低于body，则

将类480px添加到body标记。现在，您可以在站点中添加一些按钮来更改正文的宽度，并且如果您按照这种方式设置CSS类，则会改变页面的布局，而不是基于屏幕大小“仅”。所以你需要为这两种方法重构CSS。