媒體查詢：發送從頂部圖像到頁面底部

Question

我試圖讓圖像從我的頭去我的頁腳或類似的東西，當窗口低於400像素

我不沒有任何代碼可以顯示，我已經研究了幾個小時而無濟於事。

這可能嗎？我使用bootstrap來實現響應。

Answer 1

無論您是否使用Bootstrap，您都可以使用CSS來做到這一點。首先保持移動，我解決了這個問題，以便在窗口寬度超過400像素時，頁眉開始在頁腳處並移動到頂部。我做了a demo for you。

說你的HTML看起來像這樣（我使用的H1，而不是一個IMG標籤）：

​​

你的CSS應該是這樣的：

body { 
    position: relative; 
    height: auto; 
    background: white; 
} 

h1 { 
    position: absolute; 
    display: block; 
    top: 100%; 
    left: 0; 
    font-size:2em; 
    height:2em; 
    background: gray; 
} 

@media (min-width:400px) { 

    h1 { 
     position: relative; 
    } 

    .content { 
     margin-top: 2em; 
    } 

}