@Media查询响应式设计(移动/平板电脑/桌面)

Question

上面是我的问题。
我的CSS是否不正确显示每个屏幕大小的一类？

我一直在做一百万个不同的变体（当然，这是一个夸张的），我的最终结果略有不同，但结果略有不同。

这次我结束了所有3个课程，直到屏幕达到480像素。
然后只显示我的.desktop课程。

    /*Desktop Query*/
    @media only screen and (min-width: 768px) {
        .desktop {
            display: none;
        }
        .mobile, .tablet {
            display: block;
        }
    }
    /*Mobile Query*/
    @media only screen and (max-width: 480px) {
        .mobile {
            display: none;
        }
        .desktop, .tablet {
            display: block;
        }
    }
    /*Tablet Query*/
    @media only screen and (min-width: 481px) and (max-width: 768px) {
        .tablet {
            display: none;
        }
        .mobile, .desktop {
            display: block;
        }
    }

这是我的html：

    <div class="mobile">
        <main>
            <h2> </h2>
            <p> </p>
        </main>
    </div>

Answer 1

您的代码无法正确显示的问题是，您实际上将显示器倒置为100％从应有的内容倒置：

    /**Desktop Query*/
    @media only screen and (min-width: 768px) {
      .desktop {
        display: block;
      }
      .mobile, .tablet {
        display: none;
      }
    }
    /*Tablet Query*/
    @media only screen and (min-width: 481px) and (max-width: 768px) {
      .tablet {
        display: block;
      }
      .mobile, .desktop {
        display: none;
      }
    }
    
    /*Mobile Query*/
    @media only screen and (max-width: 480px) {
      .mobile {
        display: block;
      }
      .desktop, .tablet {
        display: none;
      }
    }

请注意，我还将平板电脑查询移至上方移动查询上方，因为媒体查询将依次执行从上到下执行，这可以解释为什么您之前有奇怪的结果。p>希望这会有所帮助！：）

Answer 2

我清理了您的示例，因此您可以从中更有意义。这样就可以正常工作：

/*Desktop Query*/
@media only screen and (min-width: 768px) {
  body {
    background: black;
  }
}
/*Mobile Query*/
@media only screen and (max-width: 480px) {
  body {
    background-color: tomato;
  }
}
/*Tablet Query*/
@media only screen and (min-width: 481px) and (max-width:768px) {
  body {
    background: pink;
  }
}