制作響應式整頁的最佳方法？

Question

我正在嘗試使用單個圖像作為背景制作網站，然后在其上添加內容。 到目前為止，我能夠使用background-size：cover來實現這一點，但是，在將內容垂直對齊到頁面中間時，我遇到了很多困難（每個垂直對齊解決方案似乎都涉及到高度一點...）

看着一些正在做我想做的網站（例如www.novactive.ca/en），我意識到當我調整瀏覽器大小時，正在調整圖像的高度。 我不知道這是怎么做的，但我確實懷疑其中涉及到一些JavaScript ...

所以我想知道我是否一直在正確嘗試此操作，或者是否有更好，更簡單的方法來實現這一目標？

Answer 1

使用https://css-tricks.com/perfect-full-page-background-image/然后，您需要將文本絕對定位在圖像頂部，使其寬度為100％，並使其居中對齊。 更改頂部的垂直高度。

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;
}

Answer 2

我建議使用flexbox。 （方便的指南。）它使您可以在不知道高度的情況下使事物居中。 它是現代的，並且受所有主要瀏覽器的支持（但是，Safari在CSS行之前仍然需要-webkit-標志...）。

您可以設置容器的高度和寬度以覆蓋整個頁面（使用視口單位）並顯示flex。 然后，使用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>

制作響應式整頁的最佳方法？

問題描述

2 個解決方案

解決方案1
0 2015-04-17 17:13:10

解決方案2
0 2015-04-17 17:23:01

制作響應式整頁的最佳方法？

問題描述

2 個解決方案

解決方案1 0 2015-04-17 17:13:10

解決方案2 0 2015-04-17 17:23:01

解決方案1
0 2015-04-17 17:13:10

解決方案2
0 2015-04-17 17:23:01