我有一个固定高度 445px 的 div,如下:
header {
text-align: center;
height: 445px;
overflow: hidden;
margin-top: 0;
box-shadow: 0 1px 1px rgba(57, 63, 72, 0.3);
}
我希望它在屏幕宽度缩小时保持相同的高度。
问题是,当宽度缩小到 500px 以下时,header 的标题变成了两行,结果搜索输入栏消失了。
所以,我想说:
if (screen size >= 500) height = 600px
有可能吗?我不想使用 vh
或 vw
,因为它不应该是渐变的,它仅适用于 500 像素以下的屏幕。
我正在使用反应
答案 0 :(得分:1)
您可以使用媒体查询。您可以为不同的屏幕尺寸定义样式。
@media only screen and (max-width: 500px) {
header {
height:600px;
}
}
答案 1 :(得分:1)
如果我理解正确的话,你必须这样做:
@media only screen and (min-width: 500px) {
header {
height: 600px;
}
}
这意味着如果屏幕大于500px
,标题的高度将为600px
答案 2 :(得分:-1)
你的 html 是什么样的?这听起来像是您试图影响的 div 类的问题。