Question

 <div class = "header>
</div>

.header{
position:relative
color:green;
}

@media only screen and (max-width : 400px) {
.header{
position:fixed
color:blue;
}
}

我有一个具有相对定位的div，在媒体查询中我将其更改为fixed。我现在正在尝试定位媒体查询div，但它正在修改原始div。有什么建议？我的尝试是让JS检查屏幕宽度，但这不起作用。

只是为了澄清我希望我的Javascript申请媒体查询div标题。

if(screen.width<400){
        console.log('yes');
    $(window).scroll(function(){
        $(".header").css("top", Math.max(0,30 - $(this).scrollTop()));
    });}

Answer 1

好的，让我澄清一下......你没有2个div。你有1个div，浏览器应用指示的样式...即：当屏幕很大时，它应用常规风格：

.header{
    position:relative
    color:green;
}

当您在移动设备中时，它适用：

@media only screen and (max-width : 400px) {
    .header{
        position:fixed
        color:blue;
    }
}

他们都在完全相同的事情..只是不同的造型规则。所以你不能＆＃34;目标＆＃34;一个或另一个，因为它们是完全相同的元素。如果您可以将其放入jsfiddle或codepen进行复制，则可以更轻松地查看您拥有的内容。

如果您只是想覆盖媒体查询样式，那么您正在做的事情应该有效，或者使用getComputedStyle（element）。[property]

关于媒体查询元素的JQuery

1 个答案: