1

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

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

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

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

4

5 回答 5

4

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

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

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

于 2013-09-26T13:50:52.990 回答
3

不，不是唯一的方法。

您始终可以使用 js 使页面响应。

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

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

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

这里有一些有趣的文章。

  1. 高效媒体查询的 7 个习惯
  2. 确定响应式设计的断点
于 2013-09-26T14:03:58.707 回答
0

您不需要将元素移动到 DOM 树中的不同位置 - 您需要将其移动到屏幕上的不同位置。正确的 Web 开发将内容和表示分离 - HTML 文档中信息的位置与它在屏幕上的位置几乎没有关系。这里没有太多篇幅来讨论 CSS 定位，但我会查看 position: absolute、 position: fixed 和 float。

于 2013-09-26T15:01:17.383 回答
0

您可以使用该window.onResize事件来检测宽度的变化并相应地进行处理。

于 2013-09-26T13:54:16.283 回答
0

你可以使用香草js

if (window.innerWidth < 768) 
{
    
//do something here 
   
 }
于 2020-10-21T06:50:42.793 回答