由CSS Media Queries触发的DOM操作 [英] DOM Manipulation triggered by CSS Media Queries

问题描述

我使用CSS媒体查询来提供我网站的不同视图。基本上只取决于我显示/隐藏某些元素的宽度。

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

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

我已经找到了这个：
http://css-tricks.com/media-query-change-detection-in-javascript-through -css-animations /
但它真的是唯一的方法吗？

解决方案

这不是唯一的方法：）

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

intention.js - 提供了一种轻量级且清晰的方式，以响应式的方式动态重构HTML

I am using CSS media queries to deliver different views of my website. Basically just depending on the width i show/hide certain elements.

Now I also need to move stuff around depending on this width. That means a DOM element must move to a different place in the DOM tree.

Since it contains forms and other unique stuff, I can not just have it in the DOM tree twice and toggle visibility. I really need to move it around, preferably with jQuery.

I have already found this: http://css-tricks.com/media-query-change-detection-in-javascript-through-css-animations/ But is it really the only way?

解决方案

No. It isn't the only way :)

enquire.js - A lightweight, pure JavaScript library for responding to CSS media queries.

intention.js - Offers a light-weight and clear way to dynamically restructure HTML in a responsive manner

这篇关于由CSS Media Queries触发的DOM操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！