媒体查询图像以在桌面和移动设备上工作

Question

我的网站上有一个背景图片，可以在桌面上正常工作但是当我尝试在Mobile上查看网站时，图像就会消失。我该如何解决这个问题呢？我已经添加了媒体查询并尝试使用在线资源修复此问题，但我不确定我缺少什么。

@media screen and (min-width: 650px){
  header.page-header {
    text-align: center;
    color: white;
    background-image: url("https://images.pexels.com/photos/1040499/pexels-photo-1040499.jpeg");
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: 100%;
    background-attachment: scroll;
}}

header.page-header .intro {
  padding-top: 100px;
  padding-bottom: 100px;
}

header.page-header .intro p {
  font-family: 'Old Standard TT', 'Times New Roman', Times, serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  margin-bottom: 25px;
}

header.page-header .intro h1 {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 50px;
  font-weight: 700;
  line-height: 40px;
  margin-bottom: 25px;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  header.page-header .intro {
    padding-top: 200px;
    padding-bottom: 200px;
  }
  
  header.page-header .intro p {
    font-family: 'Old Standard TT', 'Times New Roman', Times, serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 40px;
    margin-bottom: 25px;
  }
  
  header.page-header .intro h1 {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 65px;
    font-weight: 700;
    line-height: 75px;
    margin-bottom: 50px;
    text-transform: uppercase;
  }
}

<header class="page-header">
  <div class="container">
    <div class="intro">
      <p>Hello.</p>
      <a class="scroll-trigger" href="#about">
        <div class="scroll-down">
          <span>
            <i class="fa fa-angle-down fa-4x"></i>
          </span>
        </div>
      </a>
    </div>
  </div>
</header>

Answer 1

只需从CSS中删除媒体查询即可

@media screen and (min-width: 650px){
    // CODE
}

如果你在CSS中写这个代码，那么只有当你的屏幕分辨率大于650px或min-width: 650px时，该代码才适用

编辑

在你的网站有.header.page-header类包含(min-width: 500px)所以，删除它，你的问题解决了。

将background-size: 100%替换为background-size: cover

header.page-header {
  text-align: center;
  color: white;
  background-image: url("https://images.pexels.com/photos/1040499/pexels-photo-1040499.jpeg");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: 100%;
  background-attachment: scroll;
}

header.page-header .intro {
  padding-top: 100px;
  padding-bottom: 100px;
}

header.page-header .intro p {
  font-family: 'Old Standard TT', 'Times New Roman', Times, serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  margin-bottom: 25px;
}

header.page-header .intro h1 {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 50px;
  font-weight: 700;
  line-height: 40px;
  margin-bottom: 25px;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  header.page-header .intro {
    padding-top: 200px;
    padding-bottom: 200px;
  }
  
  header.page-header .intro p {
    font-family: 'Old Standard TT', 'Times New Roman', Times, serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 40px;
    margin-bottom: 25px;
  }
  
  header.page-header .intro h1 {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 65px;
    font-weight: 700;
    line-height: 75px;
    margin-bottom: 50px;
    text-transform: uppercase;
  }
}

<header class="page-header">
  <div class="container">
    <div class="intro">
      <p>Hello.</p>
      <a class="scroll-trigger" href="#about">
        <div class="scroll-down">
          <span>
            <i class="fa fa-angle-down fa-4x"></i>
          </span>
        </div>
      </a>
    </div>
  </div>
</header>