我知道网站的布局和功能应该严格分开。布局应该用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。每个媒体查询也只调用一次查询，因此使用最小的 CSS 文件对下载量的影响也将大大减少。是的，当然，这意味着该站点依赖于 JS。
这不是坏主意，但我认为这也不是好主意。几周前我曾想过类似的事情。我想制作 CSS，它将在浏览器中通过 JS 在几个循环中编译，然后附加到 head 部分。但经过深思熟虑后，我决定不这样做。
我知道你可以做回退和一些花哨的东西，所以它可以在每个有或没有 js 的浏览器中工作，但我已经查看了我的网格。它需要不到 10KB。这是一个有趣的想法，但它并不像它需要的那样做太多的工作。保持你的 HTML 井井有条，你不会遇到太多 css 类的问题。您必须让使用您的“框架”的人在某些断点处定义宽度。最简单的事情就是写一个类名。
考虑一下，当您使用例如引导程序并希望在移动设备上拥有 12 列时，您只是没有定义它，它会自动落入该宽度。很多时候，用 css 类定义最多 2 个断点就足够了。
当我想到 enquirejs 时，我认为它可以用于隐藏移动设备上的滑块。当您只显示：无时，它仍在运行和更改类。如果您有类似的东西应该删除，因为移动设备不是运行某些东西的好环境，您可以使用查询禁用它。另一个例子是 mansory 网格，您可以通过 enquirejs 启动和禁用它。
基本上，如果你有一些已经依赖于 js 的东西并且想要在不同的屏幕上自定义它，或者给出不同的行为，你可以使用它，因为如果你只是在窗口加载或文档加载上设置了一些东西，你就会遇到调整窗口大小的问题。在这里你可以使用它。