CSS媒体查询出了什么问题？

Question

我正在研究一些基本的媒体查询。 我不确定是什么问题，但是无论我做什么，该图像都不会显示在div（id =“ image”）中。 我目前仅在Chrome和其他桌面浏览器上对此进行测试。 预先感谢您的反馈！

我有以下CSS的div：

HTML：

<div id="image"></div>

CSS：

#image {
    background: url(300x250_A.jpg); 
}

@media screen and (min-width:300px) {
    #image { 
        background: url(300x250_A.jpg); 
    }
}

Answer 1

你需要给你div尺寸或者增加一些内容（  如空间就足够了）。 否则，您的div将不会被渲染。

<div id="image">
    &nbsp;
</div>

请参阅此小提琴作为示例。

Answer 2

只需给#image一个高度：

#image { 
    height: 250px; 
    width: auto;
    background: url('300x250_A.jpg');
}

这看起来可能令人困惑，但是请像这样思考：由于您的#image是空的，因此即使您通过css为它提供了背景，它也没有尺寸。

出于很好的考虑，将您的图片路径用单引号#image { background: url('path/to/image.jpg') ... }来是很好的#image { background: url('path/to/image.jpg') ... }

Answer 3

您的<div>当前为空。 您需要设置height才能显示出来。 看到有高度和没有高度之间的区别。

 .with-height {height: 100px;} #image { background: url(http://lorempixel.com/640/480/); } @media screen and (min-width:300px) { #image { background: url(http://lorempixel.com/640/480/); } } 

 Can you see the image below? <div id="image"></div> Can you see the image above? <hr /> Can you see the image below? <div id="image" class="with-height"></div> Can you see the image above? 

预习

Answer 4

请检查一下

@media (min-width: 300px) {
#page {
background: url('nextpage.png') repeat-x;
}}
@media (max-width: 600px) {
#page { background: url('nextpage2.png') repeat-x;
}
}