Question

我正在尝试创建一个媒体查询，如果您的屏幕分辨率介于某个尺寸之间并且无法使其工作，则会显示图像。我正在使用以下内容：

<style>
@meida (min-width: 701px) and (max-width: 5000px) {
<div="sixteen columns" align="center">
<div class="home-boxes"><img src="http://www.ursovain.com/wp-content/uploads/boxes-3.jpg">   
</div>
}
</style>

Answer 1

您需要在下面的示例中指定它。 HTML和CSS是分开的。

<style>
@media (max-width: 600px) {
  .home-boxes {
    display: none;
  }
}
</style>

HTML

<div class="home-boxes">
    <img src="http://www.ursovain.com/wp-content/uploads/boxes-3.jpg" />
</div>

在上面的示例中，媒体查询将在满足屏幕条件时将CSS应用于其中。在这种情况下，将应用的CSS display: none为home-boxes等级的所有元素

使用媒体查询

1 个答案: