Nuxt.js 的背景图像没有响应答案

【问题标题】：Background image isn't responsive at Nuxt.jsNuxt.js 的背景图像没有响应
【发布时间】：2019-11-08 22:08:35
【问题描述】：

我最近开始开发 Nuxt 应用程序，但它在很早的阶段就在 CSS 方面失败了。对于我的问题，在这个领域似乎非常重复，它是响应式背景。到目前为止，一切似乎都很好，除非在移动网络浏览器中打开。

我想在背景中放置一个图像，并且每个内容/vue 组件等都在它前面滑动。到目前为止，这是我尝试过的：

我检查了 Chrome 网页（向上和向下一直延伸和拉伸，看起来是正确的），Chrome 开发者工具（各种移动响应也通过了，并且看到 bg-image 覆盖了整个屏幕） . 但;我在手机上打开了网站，并请一些朋友检查，所有发送相同的问题，它不是在手机上拉伸（覆盖）。

https://ibb.co/k129BrQ 移动浏览器在 index.vue 上没有填充的这个

https://ibb.co/PD5Sfyc 移动浏览器在 index.vue 上具有 1000px padding-top 的这个

https://ibb.co/PD5Sfyc 这个在 index.vue 有 1500px padding-top，但在 iphone X 设置有 chrome 开发工具（也是我期望和想要看到的）

-网站

--资产

---css

----main.css

body {
    background: url('../img/background.jpg') no-repeat fixed;
    background-position: center center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;   
}

---布局

----default.vue

<template>
    <div>
        <nuxt />
    </div>

</template>

<script>
    export default {

    }
</script>

---页数

----index.vue

<template>
  <div>
    <h1>Lorem, ipsum dolor sit amet consectetur adipisicing.</h1>
  </div>
</template>

<script>
export default {
  layout: 'default'
}
</script>

我确实希望看到图像覆盖移动浏览器的所有屏幕，但我意识到了这一点；它涵盖了应用程序创建的内容，如果内容无法到达屏幕末端，它将不会按我的预期呈现。

【问题讨论】：

标签： css vue.js background-image nuxt.js

【解决方案1】：

我认为这不是 nuxt 的问题，而是正如您所说，而是一个 css 问题。我假设您的容器（由内容的大小定义）不足以在您的屏幕上垂直伸展。因此，您可能需要应用一些额外的 css 才能这样做：

.container-which-contains-bg {
  min-height: 100vh;
}

这是否实现了你想要的？

如果是这样，您必须注意vh 在 Safari iOS 上造成了一些麻烦。在那里，您可能必须选择min-height: 100%;，并将所有包装器的高度设置为 100%。（例如body、head 以及其他任何包装图像容器 div 的内容）。

编辑：抱歉，您将样式应用于body。所以你可以使用body { min-height: 100vh; } 或body { height: 100%; } 并设置你的html { height: 100%; }。（我不确定身体和头部是否必须是min-height: 100%; 或height: 100%;。试试吧...

【讨论】：