Question

当屏幕达到最大宽度991px时，我正在尝试调整网页的徽标大小。我添加了黑色的背景颜色，看它是否有效。背景颜色会改变但高度不会改变。当我在Chrome上检查元素时，我的媒体查询的高度被删除了。当我取消选中我的身体/原始CSS中的高度时，媒体查询中的高度会起作用。

代码：

.webpage-logo{
   position: relative;
   width: 15%;
   height: 10%;
   margin-bottom: 0;
  }

@media only screen and (max-width: 1199px){
  .webpage-logo{
     height: 500px;
     //background-color: #000;
  }
 }

Answer 1

如果没有提供完整的HTML和CSS，就无法回答这个问题，因为任何东西都可以覆盖CSS。应该做的一件事是添加！最后重要。

所以不要身高：500px; ，而是身高：500px！important;

我做了这段代码并且工作正常，因此CSS中的其他内容会覆盖它：

<!DOCTYPE html>
<html>
<head>
<style>
.webpage-logo{
   position: relative;
   width: 15%;
   height: 10%;
   margin-bottom: 0;
   background-color:#000000;
  }

@media only screen and (max-width: 1199px){
  .webpage-logo{
     height: 500px;
     //background-color: #000;
  }
 }
 </style>
</head>
<body>
<div class="webpage-logo" style="margin-left:10px;">test</div>
</body>
</html>

元素不遵循媒体查询高度

1 个答案: