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

Question

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

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

Answer 1

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

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

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

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

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