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

Using Enquire for layout as opposed to using CSS for layout

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

我经常看到响应式布局的情况是,各种媒体查询都有 classes 列,其中只有 class 名称不同,但宽度值相同。

然后以

的形式导致 HTML
<div class="container small-query-columns-4 medium-query-columns-6 large-query-columns-12><p>Responsive paragraph..</p></div>.

是否可以接受,而不是总是为各种媒体查询定义相同的列宽度,只制作一个最小的 CSS 网格,其中列 classes 宽度定义为 一次 然后使用 Enquire?

动态传递每个媒体查询

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

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

我知道你可以做回退和一些花哨的东西,所以它可以在有或没有 js 的每个浏览器中工作,但我已经看过我的网格。它需要不到 10KB。这是个有趣的想法,但它不值得付出太多的努力。让您的 HTML 井井有条,您 运行 不会因为 css class 太多而陷入困境。您必须让使用您的 "framework" 的人在某些断点处定义宽度。最简单的事情就是写一个 class 名字。

考虑一下,当您使用 bootstrap 并希望在移动设备上有 12 列时,您只是不定义它,它会自动落入该宽度。很多时候用 css classes.

定义最多 2 个断点就足够了

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

基本上,如果你有一些已经依赖于 js 的东西并且想在不同的屏幕上自定义它,或者提供不同的行为,你可以使用它,因为如果你只是在 window 加载或文档加载上设置一些东西,你调整大小 window 的人有问题。在这里你可以使用它。