javascript - 使用 Inquire 进行布局而不是使用 CSS 进行布局

Question

我知道网站的布局和功能应该严格分开。布局应该用 CSS 完成，网站的功能，比如点击展开移动菜单，应该用 JS 完成。引用:1 . & 2 .

我经常看到响应式布局的情况是为各种媒体查询提供列类，其中只是类名不同，但宽度值相同。

这将导致 HTML 格式为

<div class="container small-query-columns-4 medium-query-columns-6 large-query-columns-12><p>Responsive paragraph..</p></div>.

是否可以接受，而不是总是为各种媒体查询定义相同的列宽度，只制作一个最小的 CSS 网格，其中列类宽度定义一次，然后动态传递每个使用 Enquire 进行媒体查询？

我知道这破坏了上面给定的布局 (CSS) 和功能 (JS) 的分离，尽管这意味着更清晰的 HTML，并且每个媒体查询都这样加上更少的 CSS。 Inquire 每个媒体查询也只调用一次，因此对于最小的 CSS 文件，下载量的命中也会少得多。是的，当然，这意味着该站点依赖于 JS。

Answer 1

这不是个坏主意，但我认为这也不是个好主意。几周前我曾想过类似的事情。我想制作 CSS，它将在几个循环中通过 JS 在浏览器中编译，然后附加到 head 部分。但经过深思熟虑，我决定不这样做。

我知道你可以做后备和一些花哨的东西，所以它在有或没有 js 的每个浏览器中都可以工作，但我已经看过我的网格。它需要不到 10KB。这是个有趣的想法，但它不值得付出太多的努力。让您的 HTML 井井有条，您就不会遇到太多 css 类的问题。您必须让使用您的“框架”的人在某些断点处定义宽度。最简单的事情就是写一个类名。

考虑一下，当您使用例如 bootstrap 并希望在移动设备上有 12 列时，您只是不定义它，它会自动落入该宽度。很多时候，用 css 类定义最多 2 个断点就足够了。

当我想到 enquirejs 时，我认为它可以用于例如在移动设备上隐藏 slider 。当您只显示:无时，它仍在运行和更改类。如果你有类似的东西应该被删除，因为移动不是运行某些东西的良好环境，你可以通过使用查询来禁用它。另一个例子是 mansory 网格，您可以通过 enquirejs 启动和禁用它。

基本上，如果你有一些已经依赖于 js 的东西并且想在不同的屏幕上自定义它，或者给出不同的行为，你可以使用它，因为如果你只是在窗口加载或文档加载上设置一些东西，你就会遇到一个问题调整窗口大小。您可以在这里使用它。