html - 无法应用显示 :block to div set to display:none

Question

我有一个问题，我正在尝试构建一个站点，以便当它处于桌面模式时，将包含一个 img 元素的特定 div 设置为显示:无；

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

但是，我在这样做时遇到了问题，因为 display:block 从未得到应用。我可以做反向 (display:block to display:none) 。我猜我的问题是我正在尝试将样式应用于页面上不存在的元素，如果是这种情况，我可以隐藏它，这样它就不会占用空间并显示当屏幕小于 450px 时？

非常感谢任何帮助。

这是我的CSS

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

这是我的媒体查询

@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

工作示例

/* 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
   }
}

<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>

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