2013-09-26 53 views
1

我正在使用CSS媒体查询来传递我网站的不同视图。基本上只取决于我显示/隐藏某些元素的宽度。由CSS Media Queries触发的DOM操作

现在我还需要根据这个宽度移动东西。这意味着DOM元素必须移动到DOM树中的不同位置。

由于它包含表单和其他独特的东西,我不能只在DOM树中两次,并切换可见性。我真的需要移动它,最好使用jQuery。

我已经发现了这一点: http://css-tricks.com/media-query-change-detection-in-javascript-through-css-animations/ 这是不是真的的唯一途径?

回答

4

号这是不是唯一的方法:)

enquire.js - 一个轻量级的,纯JavaScript库,用于应对CSS媒体查询。

intention.js - 提供一个轻量级的和明确的方式在快速响应的方式

+0

优秀。现在选择哪一个...;) – clamp

+0

@clamp这取决于您,并取决于您的项目特定需求。 –

0

可以使用window.onResize事件来检测宽度的变化,并与相应的工作动态重组HTML。

3

不,不是唯一的方法。

您可以随时使用js使页面响应。

另一个不错的js插件response.js

但最重要的就是如何使有效的媒体查询的概念。

现在好的趋势是根据你的页面内容而不是一些固定宽度的中断点进行媒体查询。

这是一些有趣的文章。

  1. 7 Habits of Highly Effective Media Queries
  2. Determining breakpoints for a responsive design
+0

'现在好的趋势是根据你的页面内容而不是一些固定宽度的断点来进行媒体查询。这是一个很好的观点! +1 – sebsonic2o

0

你不需要的元素移动到DOM树不同的地方 - 你需要将它移动到屏幕上的不同位置。正确的Web开发将内容和表示分离 - HTML文档中的信息位置与屏幕上的位置无关。这是没有太多空间来谈论CSS定位,但我会检查位置:绝对,位置:固定和浮动。

+1

是的,我知道,但在我的具体情况下这是不可能的。 – clamp