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

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

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

解决方法:

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

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

您可以使用另一个JS库执行相同的操作：MediaClass,以下JS行：

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

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

标签：javascript,css,responsive-design,media-queries
来源： https://codeday.me/bug/20190709/1408171.html