CSS根據寬度更改標題高度

因此，我設計了我的第一個響應式網站，並且我遇到了一個我似乎無法解決的小問題。CSS根據寬度更改標題高度

正如你可以在https://jsfiddle.net/n9xh4cLm/1/看到的那樣，有一個主容器與標題圖像部分重疊。當您更改框架的寬度時，所有元素的大小都會減小，但主容器不再與標題重疊。有沒有辦法將標題的高度設置爲標題圖像的75%，這是響應？

來源

2015-09-07 Jonan

好吧，如果你是一個網站響應早晚，恕我直言，你可能需要引入media queries。

所以這是我會在你的情況下做的。像添加：

@media (max-width: 900px) { 
header {height: 70px;} 
} 
@media (max-width: 700px) { 
header {height: 50px;} 
} 
@media (max-width: 400px) { 
header {height: 30px;} 
}

更改不同的步驟，以任何窗口寬度，你希望你的頭變得更小。

JSFIDDLE

來源

2015-09-07 15:02:00

謝謝，這對我來說最合適 – Jonan

隨時。很高興我能幫上忙。祝你的項目好運 –

您可以使用視口值而不是ems，pxs或pts。

1vw = 1視口％的寬度

1vh = 1視口的高度％

1vmin = 1vw或1vh中較小的

1vmax = 1vw或1vh，任一較大

你的情況，試試這個

.responsive img { 
    height: 100%; 
}

Demo Here

來源

2015-09-07 13:45:05

取決於哪些瀏覽器要支持。 'vh'對ie有限的支持。 http://caniuse.com/#search=vh – timo

儘管將圖像高度設置爲「100％」確實將主容器固定到圖像中的某個點，但它也會阻止圖像縮放其高度，這導致到一個奇怪的拉伸圖像。我想要的是如果視口的寬度是兩倍的小，使圖像的高度和標題的高度兩倍小，這導致主容器被擡起。我會怎麼做？ – Jonan

試試這個https://jsfiddle.net/n9xh4cLm/4/ –

CSS根據寬度更改標題高度

回答

相關問題