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

Moving content blocks using javascript for responsive design

本文关键字：响应 javascript 移动 使用      更新时间：2023-09-26

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

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

我意识到这是不理想的，我想问的是，这是一个合理的事情。

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

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

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

正确的方法是使用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.
 }
});

事件将在查询满足或'unmet'时触发。

或者，您可以监听一个resize事件，但请注意，您的函数将为每个新维度触发。(假设使用下面代码中的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;)。你应该能够通过重新思考你的网站结构来解决大多数响应式布局问题。

其他寻找解决方案的人可能对这里提供的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);

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

我在两个网站上有类似的问题，我做:

JavaScript/jQuery的窗口大小调整事件，并有断点在JavaScript。然后我删除项目，并在我想要的地方追加/prepend它。

在我的另一个网站上，我使用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
  }
 });

使用CSS和JS可以做到:)你可以用jquery将内容克隆到另一个部分(追加)，然后使用媒体查询可以控制显示的内容。

我是这样做的:

执行appendTo:

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

这是我做的一个例子:

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

这可能不是你想要的(因为它真的不是移动它，而是克隆内容)，但这就是我的方法。

相关文章：