CSS媒体查询不覆盖样式答案

【问题标题】：CSS media query not overriding stylesCSS媒体查询不覆盖样式
【发布时间】：2018-11-09 02:34:50
【问题描述】：

我有点困惑。我首先设计我的页面移动设备，因此如果您在 DevTools 上打开它并在移动设备上查看它，您将看到该设计完美地在设备上实现。在 grid.css 文件的媒体查询中，我添加了桌面视图的样式规则，但是在桌面视图中打开它时，它不会应用媒体查询。这是一个链接，如果你想查看它https://repl.it/@GianinaSkarlett/API-Capstone 否则这里是 sn-p：

这是 CSS 样式（移动优先）：

* {
 font-family: 'Open Sans', sans-serif;
 padding: 0;
}


.results {
 padding: 10px;
}

.header {
 border: solid 1px gainsboro;
 padding: 0;
 width: 100%;
 height: 65px;
}

h1 {
 font-size: 3em;
 text-align: center;
 margin: 0;
}
h2 {
 text-align: center;
 color: white;
}

.search-background-image {
  background: linear-gradient( 
  to bottom, 
  rgba(0, 0, 0, 0.5),
  rgba(0, 0, 3, 0)
  ) fixed ,url("https://image.ibb.co/nBhnQA/pexels-photo-1051075- 
  2.jpg");
  background-repeat: no-repeat;
  width: 100%;
  height: 211px;
  background-size: cover; 
 }

.search-type, .search-address {
 background-color: white;
 border-radius: 7px;
 border: white solid;
 position: absolute;
 height: 26px;
 top:  160px;
 padding-left: 3px;
 font-size: 9px;
}

.search-address {
  width: 110px;
  left: 190px;
 }

.search-type {
 left: 15px;
 width: 151px;
}

.button {
 background-color: white;
 border-radius: 15px;
 border: white solid;
 position: absolute;
 width: 150px;
 height: 32px;
 left: 90px;
 top: 210px;
}

.landing-page, .about-page {
  width: 100%;
 }

.landing-img {
 width: 100%;
 border-radius: 10px;
}

.text {
 display: inline-block;
 text-align: center;
 margin: 0;
 font-size: 14px;
}

.section-title {
 margin: 0;
 font-size: 18px;
 }

.clear {
 clear: both;
}

这是我的桌面媒体查询：

/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1152px)  {
/* Styles */
 .landing-img {
  width: 448.22px;
  height: 635px;
  border-radius: 10px;
 }

.search-type, .search-address {
 background-color: white;
 border-radius: 7px;
 border: white solid;
 position: absolute;
 height: 40px;
 top: 376px;
 padding-left: 10px;
}

.landing-page, .about-page {
 width: 100%;
}

.section-container {
  margin: auto;
 }

 .landing-img {
   width: 448.22px;
   height: 330.68px;
   border-radius: 10px;
  }

  .text {
    width: 50%;
    padding: 20px 0 0 0;
    margin: 0;
    font-size: 26px;
    }

   .section-title {
    width: 50%;
    padding: 0 0 10px 0;
    margin: 0;
    font-size: 38px;
    text-align: left;
    }

    .right {
     float: right;
     }

    .left {
     float: left;
      }

     .clear {
      clear: both;
      }

  .search-type {
   left: 150px;
   width: 440px;
  }

  .search-address {
   width: 380px;
   left: 650px;
   }

  .button {
   background-color: white;
   border-radius: 15px;
   border: white solid;
   position: absolute;
   width: 110px;
   height: 40px;
   left: 1100px;
   top: 376px;
  }

    }

【问题讨论】：

我确实看到您的媒体查询正在应用，但您的 .landing-img 的默认类将宽度覆盖为 100%。不确定您的问题是什么？
您的媒体查询正确被应用。但是，您的媒体查询中的许多选择器被具有更高特异性的其他（通用）选择器覆盖（由于您在.grid.css 之后加载styling.css）。您面临的具体问题是什么？就目前而言，您的问题太宽泛了。
@ObsidianAge 在移动视图上按预期工作，但在桌面视图上，它没有使用为桌面视图提供的样式进行渲染。我刚刚更改了放置 style.css 和 grid.css 的顺序，它确实解决了一些渲染问题，但我的landing-img 的表单、表单元素和高度仍然按照移动视图样式规则呈现。

标签： html css media-queries

【解决方案1】：

如果您希望 grid.css 覆盖您的响应式样式，请将指向 grid.css 的链接放在您的 html 文件头部中指向 styling.css 的链接之后。

【讨论】：

它确实解决了一些渲染问题，但表单仍然无法在桌面视图上呈现应有的效果。
尝试将小型设备的样式放在另一个媒体查询中，只将非常一般的样式放在外面
我将把它们分开在不同的样式表中，看看这样我能不能看出是什么导致了问题。

【解决方案2】：

我通过删除现有媒体查询并创建 2 个媒体查询使其工作，一个用于最大宽度为 800 像素的设备，一个用于最小宽度为 801 像素的设备。

【讨论】：