元素不遵循媒体查询的高度答案

【问题标题】：Element doesn't follow media query's height元素不遵循媒体查询的高度
【发布时间】：2014-03-28 15:05:42
【问题描述】：

当屏幕达到 991 像素的最大宽度时，我正在尝试调整网页徽标的大小。我添加了黑色的背景色只是为了看看它是否有效。背景颜色改变但高度不变。当我在 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;
  }
 }

【问题讨论】：

提供您正在处理的 html，并请确认您没有对 html 元素应用任何内联样式。如果可能的话，提供一个小提琴。

标签： html css media-queries

【解决方案1】：

如果不提供完整的 HTML 和 CSS，就无法回答这个问题，因为任何东西都可能覆盖 CSS。应该起作用的一件事是将 !important 添加到末尾。

所以，不要使用 height: 500px;，而是使用 height: 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>

【讨论】：

我在 Grails 上做我的网页，我正在使用引导程序，所以这可能是罪魁祸首。我会检查...
将 !important 放在那里应该仍然可以解决问题。