制作响应式整页的最佳方法？答案

【问题标题】：Best way to make responsive full page?制作响应式整页的最佳方法？
【发布时间】：2015-04-18 02:04:24
【问题描述】：

我正在尝试使用单个图像作为背景制作网站，然后在其上添加内容。到目前为止，我能够使用 background-size:cover 来实现这一点，但是在将我的内容垂直对齐到页面中间时我遇到了很多困难（每个垂直对齐解决方案似乎都涉及到已知的高度有点……）

查看一些网站正在做我想做的事情（如 www.novactive.ca/en），我意识到当我调整浏览器大小时，图像的高度正在调整。我不知道这是如何完成的，但我确实怀疑涉及到一些 javascript...

所以我想知道我是否一直在正确地尝试这一点，或者是否有更好、更简单的方法来实现这一点？

【问题讨论】：

标签： javascript css responsive-design

【解决方案1】：

使用https://css-tricks.com/perfect-full-page-background-image/ 然后你需要将文本绝对定位在图像的顶部，给它 100% 的宽度并将它的文本对齐居中。用 top 改变垂直高度。

div {
    height: 100vh;
    width: 100%;
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.text {
    position: absolute;
    z-index: 10;
    top: 40vh;
    width: 100%;
    text-align: center;
}

【讨论】：

谢谢。我已经能够用你的方法成功地做我想做的事。据我了解，在我链接的网站上调整高度不是实现响应式设计的最佳方式？
链接很好，但是他们使用 Javascript 来动态检查浏览器的高度并根据它进行更改。如果您希望能够支持较旧的浏览器，但大多数现代浏览器都支持使用 100vh（或您选择的任何数字），您可以这样做。 $("div").height($(window).height());

【解决方案2】：

我建议使用 flexbox。 (Handy guide.) 它允许您在不知道高度的情况下将事物居中。它很现代，并且受到所有主流浏览器的支持（不过，Safari 仍然需要在 CSS 行之前添加 -webkit- 标志...）。

您可以设置容器的高度和宽度以覆盖整个页面（使用viewport units）并显示弹性。然后，使用align-items 和justify-content 属性将其居中。像这样：

.container {
    height: 100vh;
    width: 100vw;
    background: #ccc url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}
.container > div {
    width: 200px;
    height: 200px;
  
    -webkit-flex: 1;
    flex: 1;
  
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

<html>
    <body>
        <div class="container">
            <div>Some text</div>
        </div>
    </body>
</html>

【讨论】：