Question

我想让我的网站“响应”。我有2列，我试图让它们在低于992px时相互叠加。这是我对列和媒体查询代码的代码。每当我低于992px时，col1保持在69％，col2保持在29％，但两者都向左浮动并堆叠在彼此之上。我只是想知道我做错了什么，因为我希望它们在低于992px时占据屏幕的宽度。 col1和col2的代码是否覆盖了@media？我已经尝试了@media with display：inline和display：block但是没有工作。对不起，如果它很乱，我上周五才开始学习：）

    @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%;
               }
          }

理想情况下，您将创建另外两个媒体查询，一个具有最大宽度：768px，另一个具有最小宽度：991px。通过这种方式，您可以考虑上方和下方的空间，并将所有数字放在那里，以便没有冲突。

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

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

然而，在可能发生冲突并且头发开始脱落的大型样式表中使用'！important'会变得很成问题，明智地使用它。

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

1 个答案: