html - 如何使用 CSS 使标题的大小有条件地增长？

Question

我有一个网页，其标题在页面的其余部分滚动时保持固定。太好了，现在标题是 {position: fixed, height: 60px} 并且我们有 body {margin-top: 60px}。

我们有一些响应式设计，所以在手机上，标题看起来有点不同，但没什么大不了的，媒体查询。

现在我需要在标题中添加一个按钮......但只有当页面的某些条件为真时。但这就是我难住的地方。在宽屏幕上，按钮应该与标题的其余部分在同一行，在当前 60 像素的高度内。但是在手机上，没有空间，所以我需要将按钮向下推到下一行。如果按钮总是存在，好吧，我可以有一个媒体查询，说当宽度小于任何使标题高度为 90 像素和主体边缘顶部为 90 像素时。

但按钮并不总是出现。当按钮存在时如何编写css以使标题高度扩大，但如果不存在则不扩大？

标签： htmlcssmedia-queries

Answer 1

只要按钮也存在，您是否可以在标题中添加一个类？然后您可以根据该类进行正确的样式设置。这可以使用 js 轻松完成。