我有一个针对不同屏幕尺寸的不同设计的响应式网页，我正在使用@mediaquery 来更改我的设计。我想让用户能够更改设计以适应更小或更大的屏幕尺寸，即使屏幕尺寸没有改变。
是否可以在不改变屏幕大小的情况下使用 js 触发 @mediaquery？
问问题
2370 次
1 回答
1
看看Enquire.js，一个用于响应 CSS 媒体查询的轻量级纯 JavaScript 库。
有了它，您可以根据屏幕的宽度添加一个classto 。body然后，如果您根据主体是否具有某个类来组织您的 CSS。您可以使用 JS 根据用户的选择动态地将这些类添加到正文中。
你可以用另一个 JS 库做同样的事情：MediaClass，下面的 JS 行：
MediaClass("small-screen", "body(this-max-width: 480px)");
如果的宽度低于，则将该类添加small-screen到 body 标记中。现在你可以在你的网站上添加一些按钮来改变body的宽度，并且如果你以这种方式设置你的CSS类，你的页面布局将会改变，而不是“仅”基于屏幕大小。因此，对于这两种方法，您都必须稍微重构一下 CSS。body480px
于 2013-09-14T15:11:55.040 回答