響應邊距和填充

Question

我想使頁面的某些元素在縮小尺寸時具有更多流暢的過渡。如果你看看這裏：

http://abezieleniec.com/SIDWeb/

你可以看到，當你規模下降到平板電腦和手機尺寸的第一個藍條捕捉到不同的位置，以滿足主標識。這顯然是通過媒體查詢完成的，但我想知道是否有一種方法可以讓百分比更流暢？我假設這將需要一些JS ... 歡迎任何想法！

感謝

Answer 1

這不是太辛苦的過程，因爲它發生！這件事情我不得不使用的網站在這裏：http://flourishworld.co.uk/

的關鍵是使用方法：使用前「的margin-top：XX％」：

.element:before { 
    margin-top: 50%; 
    position: relative; 
    content: ""; 
    display: block; 
} 

通過觀察您的網站...它可能只是提供一些更改後的代碼更容易。首先，我改變了你的標記（這可能不適合你）

<div id="home" class="jumbotrontop animated fadeIn"> 
    <div class="biglogo" style="opacity: 1;"> 
    <img src="images/biglogofull.png"> 
    </div> 
</div> 

使用上面的代碼的想法：

#home:before { 
    margin-top: 55%; 
    position: relative; 
    content: ""; 
    display: block; 
} 

但對於這個工作，你需要其他元素的一些修改CSS代碼...

.jumbotrontop { 
    font-size: 21px; 
    height: 100%; 
    line-height: 2.1428571435; 
    color: inherit; 
    width: 100%; 
    background-size: cover; 
    z-index: 1; 
} 

.biglogo { 
    width: 80%; 
    display: block; 
    margin-left: 10%; 
    margin-right: 10%; 
    margin-top: 10%; 
    margin-bottom: 130px; 
    opacity: 1; 
    position: absolute; 
    z-index: 100; 
    top: 0; 
    position: relative; 
    display: table; 
} 

.jumbotrontop img { 
    width: 100%; 
    height: auto; 
    margin: auto; 
    max-width: 740px; 
    display: block; 
} 

#home:after { 
    background-color: #eeeeee; 
    background-image: url(../images/background1.jpg); 
    display: block; 
    position: fixed; 
    top: 0; 
    left: 0; 
    content: ""; 
    bottom: 0; 
    right: 0; 
    z-index: 1; 
    background-size: cover; 
} 

這樣做是需要你的頂部元素，並採用它的高度了，它的內容是絕對定位的，因此不會佔用空間。 ：before元素然後添加一個響應高度，隨着頁面寬度的縮小而縮小。在這樣做時，我們必須改變徽標標記，以便它保持在中心位置，並繼續縮小窗口。

希望這會有所幫助！沒有JS，全部是CSS。