Question

我目前正在开发一个响应迅速的网站，我点击了两个区域，其中某些内容块需要移动到网站的其他区域。纯粹使用CSS是不可能的。我想我可以相对重新定位块，但随着尺寸的变化，这是不可能的。

我想到的选项是，当媒体查询被触发时，然后将一个块拉出页面并将其附加到我需要它的其他地方。

我意识到这是不理想的，我想问的是这是否合理。

我知道你们中的一些人可能会说重新订购一些标记，但这是不可能的。如上所述，我知道回到javascript并不理想，但它会适合这个，我不特别希望复制内容，所以我可以避免使用javascript。

Flexbox将是完美的，但支持不是我希望目前让我使用它的地方。

这里的人们怎么想？还有其他解决方案吗？

Answer 1

正确的方法是使用MediaQueryList收听媒体查询：

var mql = window.matchMedia("(max-width: 320px)");
mql.addListener(function(event) {
 if(event.matches) {
  // Window width is less than or equal to 320, do something cool.
 } else {
  // Window width is more than 320, do something else.
 }
});

当查询得到满足或“未满足”时，将触发事件。

或者，您可以收听调整大小事件，但请注意，您的函数将针对每个新维度触发。（在下面的代码中假设jQuery。）

$(window).resize(function() {
 if($(window).width() <= 320) {
  // Window width is less than or equal to 320, do something cool.
 } else {
  // Window width is more than 320, do something else.
 }
});

就像你自己说的那样，使用JS来使你的布局响应通常是不可取的。你永远不能假设所有用户都启用了JS，一切顺利。

我希望您通过重构HTML和CSS来解决这个问题。如果内容布局必须进行大量更改，请尝试在HTML中的两个不同位置输出内容块，并使用CSS媒体查询切换可见性（将一个设置为display:none;，另一个设置为display:block;）。您应该能够通过重新思考网站结构来解决大多数响应式布局问题。

Answer 2

其他寻求解决方案的人可能对此处提供的Bootstrap Toolkit JS库感兴趣：https://github.com/maciej-gurban/responsive-bootstrap-toolkit

响应式Bootstrap Toolkit提供了一种简便的断点方式   在JavaScript中检测，检测当前活动的变化   断点，以及执行任何特定于断点的JavaScript   代码。

SASS模块可为需要的元素提供快速简单的样式   每种屏幕分辨率的不同属性值。

然后你可以做以下事情：

(function($, document, window, viewport){
  // Listen to resize event
  $(window).bind('resize', function() {
    // Default 300ms poll delay
    viewport.changed(function() {
      // Debug
      console.log( 'Current breakpoint: '+ viewport.current() );
      // Trigger custom event
      $('body').trigger('viewportChanged', [viewport.current()]);
    }, 300)
  });

  // Register event listener
  $(document).on('viewportChanged', 'body', function(event, current) {
    console.log('Current breakpoint: '+ current);
  }

})(jQuery, document, window, ResponsiveBootstrapToolkit);

Answer 3

您可以查看一些已经提供的响应式设计HTML样板文件，例如Twitter Bootstrap或Zurb Foundation。也许他们现有的配置可以满足您的需求。

Answer 4

我在两个网站上遇到类似的问题，我这样做：

使用window re size事件的JavaScript / jQuery，并在JavaScript中使用断点。然后我删除该项目并将其添加/添加到我想要的位置。

在我的其他网站上，我使用Twitter Bootstrap，它非常敏感，看起来不错。

我个人会将Twitter Bootstrap作为一个不错的网格系统。如果您的网站非常复杂并且无法使用Twitter Bootstrap完成，则捕获窗口大小事件是最佳方式。

$(window).resize(function() {
  //Use $(window).width() and maybe some ifs/a switch to handle break points
  if($(window).width()<700){
    //Move it here
  }
 });

Answer 5

使用CSS和JS可以完成:)你可以使用jquery（append）将内容克隆到另一个部分，然后使用媒体查询来控制显示的内容。

以下是我的工作：

我做了appendTo：

$( $('.goto').html() ).appendTo('.mobile')

这是我做的一个例子：

http://jsfiddle.net/Riskbreaker/vkfWd/

这可能不是你想要的（因为它真的没有移动它而是克隆内容）但这就是我这样做的方式。

使用javascript移动内容块以进行响应式设计

5 个答案: