Question

所以我设计了我的第一个响应式网站，而且我已经遇到了一个我似乎无法解决的小问题。

正如您在https://jsfiddle.net/n9xh4cLm/1/所看到的那样，主要容器部分与标题图像重叠。当您更改框架的宽度时，所有元素的大小都会缩小，但主容器不再与标头重叠。有没有办法将标题的高度设置为标题图像的75%，这是响应？

Answer 1

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

1vw =视口宽度的1％

1vh =视口高度的1％

1vmin = 1vw或1vh，取较小者

1vmax = 1vw或1vh，取较大者

在你的情况下试试这个

.responsive img {
    height: 100%;
}

Demo Here

Answer 2

好吧，如果你迟早要建立一个快速响应的网站，imho，你可能需要介绍media queries。

所以这就是我要做的事情。有点像添加：

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

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

<强> JSFIDDLE

CSS根据宽度更改标题高度

2 个答案: