结合 jQuery 和 CSS 媒体查询答案

【问题标题】：Combining jQuery and CSS Media queries结合 jQuery 和 CSS 媒体查询
【发布时间】：2013-12-22 13:59:34
【问题描述】：

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

css

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

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 边距，但这也不起作用。我究竟做错了什么？任何人都可以帮忙吗？非常感谢。

【问题讨论】：

我理解这个问题，但为什么不使用 CSS 来显示/隐藏呢？
你测试的是什么浏览器？
isherwood- 你完全正确。我不想用太多代码让你厌烦，所以我没有把整个事情都写出来。请查看更新版本，我也添加和删除了类。

标签： jquery css media-queries

【解决方案1】：

即使你设置了width:100%，$(".placeholder").css("width") 也会给你 px

的宽度

DEMO

if ($(".placeholder").css("width") == $(window).width()+"px")//or $(container).width()

表示 .placeholder 宽度为 100% if margin=0

【讨论】：

不，抱歉。这是 div 名称的错误选择。忘记#this，我们就叫它#blue吧。
我不这么认为，因为那会针对window。

【解决方案2】：

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

看到这个example

【讨论】：

谢谢安德烈！那效果很好。我之前试图这样做，但由于某种原因它没有用。现在可以了！