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媒体查询与jquery窗口宽度768之间的不一致，因为它们似乎不会同时触发。这篇文章在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所说，$（＆＃34; .placeholder＆＃34;）。css（＆＃34; width＆＃34;）会返回一个px值。要解决此问题，您可以为您的班级添加另一种不会影响您的设计的样式比如border-color: rgb(255, 0, 0);并将其用于你的..

请参阅此example

Answer 2

即使您设置width:100%， $(".placeholder").css("width") 也会在 px 中为您提供宽度

<强> DEMO

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

如果margin = 0

，

表示 .placeholder 宽度为100％

结合jQuery和CSS Media查询

2 个答案: