css - 为什么我的媒体查询不起作用？

Question

我正在尝试让我的网站“响应式”。我有 2 列，当低于 992px 时，我试图让它们相互堆叠。这是我的列代码和媒体查询代码。每当我低于 992px 时，col1 保持在 69%，col2 保持在 29%，但两者都向左浮动并相互堆叠。我只是想知道我做错了什么，因为我希望它们在低于 992px 时占据屏幕的宽度。 col1 和 col2 的代码是否覆盖了@media？我已经尝试使用 display: inline 和 display: block 的 @media 但都没有用。不好意思，打扰了，我是上周五才开始学的:)

    @media (min-width: 768px) and (max-width: 991px) {
         .col1 {
            width: 98%;
               }
         .col2 {
            width: 98%;
               }
          }

    .col1 {
       margin: auto;
       float: left;
       width: 69%;
       background-color: #686472;
       color: white;
       padding: 5px;
       font-family: geneva;
       font-size: 14px;
       }

    .col2 {
       margin: auto;
       float: left;
       width: 29%;
       background-color: #454349;
       color: white;
       padding: 5px;
       font-family: geneva;
       font-size: 14px;
       padding-bottom: 39px;
       }

Answer 1

.col1 {
   margin: auto;
   float: left;
   width: 69%;
   background-color: #686472;
   color: white;
   padding: 5px;
   font-family: geneva;
   font-size: 14px;
   }

.col2 {
   margin: auto;
   float: left;
   width: 29%;
   background-color: #454349;
   color: white;
   padding: 5px;
   font-family: geneva;
   font-size: 14px;
   padding-bottom: 39px;
   }

 @media (min-width: 768px) and (max-width: 991px) {
         .col1 {
            width: 98%;
               }
         .col2 {
            width: 98%;
               }
          }

但理想情况下，您会再创建两个媒体查询，一个最大宽度为:768 像素，另一个最小宽度为:991 像素。这样您就可以考虑上下空间，并将所有数字都放在那里，这样就不会发生冲突。

本质上发生的是媒体查询之外的任何内容都适用于所有宽度。解决此问题的一个简单、非正统的解决方案是在媒体查询内的规则中添加“!important”，而无需更改顺序。

@media (min-width: 768px) and (max-width: 991px) {
         .col1 {
            width: 98% !important;
               }
         .col2 {
            width: 98% !important;
               }
          }

但是，'!important' 的使用在大型样式表中可能会出现严重问题，在这种情况下可能会发生冲突并且头发开始脱落，请明智地使用它。