如何使用javascript触发用户需求的媒体查询 [英] How to trigger media query on user demand with javascript

问题描述

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

I have a responsive web page with a different design for different screen sizes, I'm using @mediaquery to change my design. I want to give the user the ability to change the design for smaller or bigger screen sizes even if the screen size didn't change.

是否可以触发@带有js的mediaquery没有改变它的大小？

Is it possible to trigger a @mediaquery with js without change in sceen size ?

推荐答案

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

Have a look at Enquire.js, a lightweight, pure JavaScript library for responding to CSS media queries.

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

With it, you could add a class to body based on the width of the screen. If you then organize your CSS based on if the body has a certain class or not. You could use JS to add those classes to the body dynamically based on the users selection.

您可以对另一个JS库执行相同的操作： MediaClass ，以下JS系列：

You could do the same kind of thing with another JS library: MediaClass, the following line of JS:

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

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

adds the class small-screen to the body tag if the body's width is under 480px. Now you could add some buttons to your site which change the body's width and based on that the layout of your page will change if you have your CSS classes set up that way, instead of "only" based on the screen size. So you would kind of have to refactor your CSS a bit for both of these approaches.

这篇关于如何使用javascript触发用户需求的媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！