使用查询布局而不是使用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网格，其中列班宽度定义为一次，然后动态地将这些每个媒体查询与查询？

我知道这个遗址从布局（CSS）和功能（JS）上面给出的分离，尽管这将意味着更清洁的HTML，而这每各媒体查询加少得多CSS为好。每个媒体查询也只能调用一次，所以用最小的CSS文件来下载的数量也会少得多。是的，当然，这意味着该网站是JS取决于。

Answer 1

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

我知道，你可以回退和一些花哨的东西，所以它在有或无的js每一个浏览器，但我看了看我的网格。它不到10KB。这是一个有趣的想法，但它并不像工作那么繁琐。保持你的HTML有组织，你不会遇到太多的CSS类的问题。你必须让某个使用你的“框架”的人在特定的断点处定义宽度。最简单的事情就是写一个类名。

想想看，当你使用例如引导，并希望有移动12列，你只是不定义它，它会自动落入该宽度。很多时候它足以用css类定义最多2个断点。

当我想到enquirejs时，我认为它可以用于在手机上隐藏滑块。当你只是显示：没有它仍然在运行和更改类。如果您有类似的东西需要删除，因为移动不是很好的运行环境，您可以使用查询来禁用它。另一个例子是mansory网格，您可以通过enquirejs启动和禁用该网格。

基本上，你可以使用它，如果你有一些已经js依赖，并希望在不同的屏幕上定制它，或给予不同的行为，因为如果你只是在窗口加载或文档加载设置的东西，你有一个问题与某人谁调整窗口。在这里你可以使用它。