1

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

我正在考虑的选项是，当触发媒体查询时，从页面中拉出一个块并将其附加到我需要的其他地方。

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

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

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

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

4

5 回答 5

3

正确的方法是使用以下方法收听媒体查询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;）。您应该能够通过重新考虑您的网站结构来解决大多数响应式布局问题。

于 2013-05-08T10:04:08.023 回答
2

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

Responsive 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);
于 2015-02-01T08:20:45.973 回答
0

I have a similar problem on two websites and i do:

JavaScript/jQuery with the window re size event and have breakpoints in JavaScript to. I then remove the item and append/prepend it where i want it to be.

On my other website i use Twitter Bootstrap which is very responsive and looks nice.

I would personally go with Twitter Bootstrap as its a nice grid system. If your site is very complex and cant be done using Twitter Bootstrap them capturing the window re size event is the best way.

$(window).resize(function() {
  //Use $(window).width() and maybe some ifs/a switch to handle break points
  if($(window).width()<700){
    //Move it here
  }
 });
于 2013-05-08T10:00:50.860 回答
0

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

这是我所做的：

我做appendTo：

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

这是我做的一个例子：

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

这可能不是您要寻找的（因为它实际上并没有移动它，而是克隆了内容），但这就是我这样做的方式。

于 2013-05-08T15:01:22.647 回答
0

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

于 2013-05-08T09:57:05.220 回答