-1

我想以特定的屏幕尺寸将 DOM 对象移动到另一个对象中。我受到这个答案的启发，但我使用的布局可以通过 LESS 更改，所以即使它我在我不想用作触发器的对象上使用固定宽度。我喜欢它，因为它是轻量级的，而且它需要 equire.js 或 modernizr 之类的东西来模拟媒体查询，而且它很适合我的目的。

我现在使用 1px 的下边距，但我对此并不满意，所以我正在寻找最无用且意义更少的 CSS 来使用它作为触发器。我听说过 css3 的“迁移”，但似乎它仍然是一个不完整的草案，并且没有在任何浏览器中实现。如果我是对的浏览器甚至没有阅读它。至少它没有出现在萤火虫中。

这就是我所做的：

css

@media screen and (min-width: 768px) {

    .sidebar-secondary {
        margin-bottom: 1px;
    }

}

@media screen and (min-width: 992px) {

    .sidebar-secondary {
        margin-bottom: 0;
    }

}

js

var sidebar_move = function(){
    if ( $(".sidebar-secondary").css("margin-bottom") === "1px") {
        $(".sidebar-secondary").appendTo(".sidebar-primary");
    }
}

window.setInterval(sidebar_move, 1000);

知道我是否可以使用“无用”的 CSS 值。一些没有人使用的东西。我喜欢它对我来说尽可能没有冲突，并且从其他人那里改变 css 不应该受到干扰，所以保证金是一个非常糟糕的解决方案。

由于几乎每个人似乎都认为我应该用 java 脚本来膨胀我的代码，我想知道这样做的原因。

顺便说一句，如果我理解这一点，我认为这比用javascript拉窗口宽度更可靠，这就是为什么存在像eqire.js这样的复杂脚本还是我错了？

让 js 依赖 css 有什么不好？我想将它用于这个特定的事情，而不是别的。

4

2 回答 2

1

我只是建议使用Enquire.js：它可能很有用，而不涉及无用的 css 规则

您的示例只是：

enquire.register("screen and (min-width:768px)", {

    match : function() { 
        $(".sidebar-secondary").appendTo(".sidebar-primary"); 
    },

    unmatch : function() {
        /* e.g. remove .sidebar-secondary from .sidebar-primary */
    }
}).listen();

我认为这种方法比使用依赖于 css 规则的 javascript 更干净。事实上，你建议的方法

  • 您的应用程序的维护变得更加困难（除了您之外，任何人都可能破坏页面的功能，只需更改该特定规则即可）；
  • javascript 和 css 是严格绑定的，当一个好的规则是让 css 远离 javascript（反之亦然）
于 2013-01-28T15:53:40.907 回答
0

我一直在使用类似于您一直在做的事情（我知道这是一岁了，但它似乎没有 OP 想要的答案，这是我自己的谷歌搜索带来的第一个链接之一向上）。

/*  Normal CSS  */
.mediaQueryTracker {
     width:auto;
}

/* Mobile Example */
@media only screen and (max-width: 479px) {
     .mediaQueryTracker {
          width:479px;
     }
}

至于Javascript：

var mobile_handler = function() {
    if ( $(".mediaQueryTracker").css("width") != "auto") {
        // Do stuff
    }
}

您可以将此类分配给一个显示为 hidden 或 none 的 empy div，或者您可以让您的主容器或包装在 HTML 中为其分配 mobileQueryTracker 类，但该值将根据当前的媒体查询而改变。您可以通过检查它是否未设置为自动来为每个指定的尺寸或仅“捕获所有”移动尺寸做特定的事情。

更简单的是，您可以跳过“mobileQueryTracker”名称，只使用容器的宽度或换行。

于 2014-09-15T16:03:33.673 回答