Question

我有一个问题，我正在尝试构建一个网站，以便在桌面模式下，包含div元素的特定img设置为display:none;

当屏幕尺寸达到450px或更低时，我想将div设置为display:block并显示它。

然而，由于display:block永远不会被应用，我遇到了一个问题。我可以做尊敬（display:block到display:none）。我猜我的问题是我正在尝试将一个样式应用于页面上不存在的元素，如果是这种情况，我可以隐藏它，这样它就不会占用空间并显示它的屏幕小于450px？

非常感谢任何帮助。

这是我的CSS

#toplogo{
display: none;
margin-left: auto;
margin-right: auto;
}

这是我的Media Query

@media screen and (max-width: 450px){
#toplogo{
display: block;
}
}

这是HTML

<div id="toplogo">
     <img src="/images/myimage.png"/>
</div>

非常感谢任何帮助。

Answer 1

你的代码现在看起来很好。

但我建议使用移动优先方法，因此全球风格针对移动设备，后来针对更大的屏幕进行了改动。请务必检查您使用css媒体查询更改的内容，并检查您的代码顺序，这样您就不会在以后的全球版本中使用您的样式覆盖媒体查询。 css代码

如果我的媒体查询将放在css文件的顶部，因为它稍后会被覆盖，下面的代码段无法正常工作 - example of badly organized css media query

工作示例

＆＃13;

/* mobile first approach */
#toplogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: blue;
}

.hey {
    display: none
}
@media screen and (min-width: 450px){
    /* hide block when window width is at least 450px */
    #toplogo {
        display: none;
    }
    .hey {
        display: block
   }
}

＆＃13;

<div id="toplogo">
    <img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png">
</div>

<div class="hey">Hey, I'm bigger than 450px!</div>

＆＃13;

http://jsfiddle.net/gfuunyak/4/

Answer 2

无需申请任何js。

你的css＆amp;媒体查询写得很完美;它最终起作用;如果不能在你的工作;然后在display：block;

之后添加！important

无法应用display：block to div设置为display：none

2 个答案: