jquery - 结合 jQuery 和 CSS 媒体查询

Question

我正在使用此代码在窗口调整大小时触发内容。

CSS

@media only screen and (min-width : 320px) and (max-width : 768px) {
    .placeholder {
        width:100%;
    }

js

if ($(window).width() <= 768){ 
$('#middle').hide();
$('.left').removeClass('hidden');

} else {
$('#middle').show();
$('.left').addClass('hidden');
}
});

但是，这些是 768 处的 CSS 媒体查询与 768 处的 jquery 窗口宽度之间的不一致，因为它们似乎不会同时触发。这是这篇很棒的文章中解释的内容，http://www.fourfront.us/blog/jquery-window-width-and-media-queries

但是，当我尝试像这样应用它时

if ($(".placeholder").css("width") === "100%") {
         $('.left').removeClass('hidden');
         $('#middle').hide();
    } else {
        $('#middle').show();
        $('.left').addClass('hidden');
    }

这行不通。我试过应用其他 css 值，例如 2px 边距，但这也不起作用。我究竟做错了什么？谁能帮忙？非常感谢。

Answer 1

正如 mehdi 所说，$(".placeholder").css("width") 将返回一个 px 值。要解决此问题，您可以向您的类(class)添加另一种不会影响您的设计的样式像 border-color: rgb(255, 0, 0); 并将其用于您的 if..

查看此 example