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

Question

我的网站上有一张背景图片，在桌面上运行良好，但当我尝试在移动设备上查看网站时，图片消失了。我该如何解决这个问题以使其响应？我已经添加了媒体查询并尝试使用在线资源修复此问题，但我不确定我缺少什么。

@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 class 包含 (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>

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

Media query for image to work on Desktop and Mobile

html

css

media-queries

responsive-images