html – CSS根据宽度更改标题高度

所以我正在设计我的第一个响应式网站,我已经遇到了一个我似乎无法解决的小问题.

正如您在https://jsfiddle.net/n9xh4cLm/1/所见,有一个主容器,它与标题图像部分重叠.当您更改框架的宽度时,所有元素的大小都会缩小,但主容器不再与标题重叠.有没有办法将标题的高度设置为,例如,标题图像的75％,这是响应？

解决方法

好吧,如果你迟早要建立一个快速响应的网站,imho,你可能需要介绍媒体查询.

所以这就是我要做的事情.添加以下内容：

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

将不同的步骤更改为您希望标题变小的窗口宽度.

JSFIDDLE