我的css媒体查询有什么问题？

Question

我正在玩一些基本的媒体查询。我不确定出了什么问题，但是无论我用它做什么，图像都不会显示在div中（id =＆＃34; image＆＃34;）。我目前只在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>

请参阅this fiddle作为示例。

Answer 2

简单地给#image一个高度：

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

这看起来有点令人困惑，但请想一想：因为#image是空的，所以它没有尺寸，即使你通过css给它一个背景。

为了更好的衡量，最好在单引号#image { background: url('path/to/image.jpg') ... }

中包装图片的路径

Answer 3

您的<div>目前已空。您需要设置height才能显示。查看身高和身高之间的差异。

＆＃13;

＆＃13;

.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/); 
  }
}

＆＃13;

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?

＆＃13;

＆＃13;

＆＃13;

预览

Answer 4

请检查

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