html - 使用媒体查询实现响应式正文背景

Question

我正在设计一个带有固定壁纸的响应式网站，下面是我的 .CSS 代码:

body {
  background: url(/path...) no-repeat fixed !important;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover
}
/* Custom, iPhone Retina- Personal comment: mobile portrait */

@media only screen and (min-width: 320px) {
  body {
    background: url(images/mobile_dark_bg0.jpg) no-repeat fixed;
  }
  h1 {
    font-size: 40px
  }
  h2 {
    font-size: 25px
  }
  h3 {
    font-size: 22px
  }
  p {
    font-size: 20px
  }
  .p2, .p3 {
    font-size: 18px
  }
}
/* Extra Small Devices, Phones- Personal comment: mobile landscape */

@media only screen and (min-width: 480px) {
  body {
    background: url(images/mobile_dark_bg1.jpg) no-repeat fixed;
  }
  h1 {
    font-size: 40px
  }
  h2 {
    font-size: 25px
  }
  h3 {
    font-size: 22px
  }
  p {
    font-size: 20px
  }
  .p2, .p3 {
    font-size: 18px
  }
}
/* Small Devices, Tablets */

@media only screen and (min-width: 768px) {
  body {
    background: url(images/bg_img.jpg) no-repeat center center fixed;
  }
  h1 {
    font-size: 40px
  }
  h2 {
    font-size: 25px
  }
  h3 {
    font-size: 22px
  }
  p {
    font-size: 20px
  }
  .p2, .p3 {
    font-size: 18px
  }
}
/* Medium Devices, Desktops */

@media only screen and (min-width: 1200px) {
  body {
    background: url(images/bg_img.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    height: 100%
  }
}

请注意，我正在“更改原始正文背景，在媒体查询中使用另一个背景，以实现页面的响应式背景”。

但是背景总是乱七八糟，不是放大了，就是底部有白色的缝隙；它适用于小尺寸和超小尺寸，但屏幕越大，它就越乱。

我做错了什么？

Answer 1

如果您的背景底部有一个白色间隙，也许可以尝试:

html, body {
    height: 100vh;
}

100vh 将允许页面为设备高度，而不是容器高度的 100%。