Question

我一直在研究如何正确使用媒体查询，下面是我试图做出回应的网站。但是，我在调整图片的图像方面遇到了麻烦，我测试了我的PC上的响应速度，这是17英寸，也是我的Galaxy 5。

**编辑，问题解决了我

.background-image {
  position: fixed;
  z-index: 1;
  background:url(nycgold.jpg) fixed;
  background-size: cover;
  background-position: center;
  padding-top: 13%;
  padding-bottom: 100%;
  font-family: 'Montserrat', sans-serif;
}

@media only screen and (max-width: 320px) {
    /* styles for narrow screens */
    .background-image{
        width: 100%;
        height: auto;
    }
}

@media only screen and (max-width: 1800px) {
    /* styles for MacBook Pro-sized screens and larger */
    .background-image{
        width: 100%;
        height: auto;
    }
}

感谢任何帮助。

Answer 1

首先，你在这里有3种风格：

默认样式
最大宽度的样式：320px
最大宽度的样式：1800px

但是所有三种样式都将背景图像设置为相同的大小。背景并不是编写响应式代码所需要的，因为它们通常会尝试适应浏览器的渲染区域，但是在主样式中设置一次background-size:cover会要求浏览器填充背景整个图像，所以设置宽度是不必要的。

有关background-size CSS属性的详细信息，请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/background-size。

要测试您的媒体查询，请确保为其中的元素设置了不同的值，并使用更适合响应的内容，例如前景中的图像。 <img src="">或元素的文字大小。

Answer 2

如果你想要的背景只显示一次，没有重复，请添加background-repeat: no-repeat;

除此之外，您的图像应该适合MQ的任何大小的整个宽度。

CSS媒体查询|图像响应

2 个答案: