最佳方式使响应全页？ [英] Best way to make responsive full page?
问题描述
我试图让一个网站使用单个图像作为背景，然后在其上添加内容。到目前为止，我能够实现这个使用background-size：cover，但是我有很多困难，当涉及到垂直对齐我的内容到页面的中间（每个垂直对齐解决方案似乎涉及高度已知一些点...）
I am trying to make a website using a single image as background then add content over it. So far, I was able to achieve this using background-size: cover, however I am having a lot of difficulty when it comes to vertically aligning my content to the middle of the page (every vertical aligning solution seems to involve height being known at some point...)
看一些网站做我想做的事情（如www.novactive.ca/en），我意识到，当我调整浏览器大小时，图片正在调整。我不知道这是怎么做的，但我怀疑涉及到一些javascript ...
Looking at some websites doing what I am trying to do (like www.novactive.ca/en), I realized that the height of the image was being adjusted when I would adjust my browser size. I don't know how this is being done but I do suspect some javascript is involved...
所以我想知道如果我一直在尝试这个正确或如果有是更好，更容易的方法来实现这个？
So I am wondering if I have been trying this correctly or if there are better, easier way to achieve this ?
推荐答案
我建议使用flexbox。 （便利指南）。它允许您将内容知道身高。它是现代的，它由所有主要的浏览器（Safari，但是，仍然需要一个 -webkit - 标志之前的CSS行...）。
I would suggest using flexbox. (Handy guide.) It allows you to center things without knowing the height. It's modern, and it's supported by all major browsers (Safari, however, still requires a -webkit- flag before the CSS lines...).
您可以将容器的高度和宽度设置为覆盖整个页面（使用视口单元）和显示flex。然后，使用 align-items 和 justify-content 属性使其居中。像这样：
You could set the container's height and width to cover the whole page (using viewport units) and display flex. Then, use the align-items and justify-content attributes to center it. Like this:
.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>
这篇关于最佳方式使响应全页？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
