以上是我針對我的問題的CSS。 我的CSS在每個屏幕上只顯示一個類是不正確的嗎？

我已經做了一百萬個不同的變體(當然，這是一個夸張的說法)，我一直以稍微不同但不正確的結果結束。

這一次，我結束了所有3類顯示，直到屏幕達到480像素。 那就只有我的。桌面類顯示。

/*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>

您的代碼不能正確顯示的問題是，您完全錯誤地顛倒了它應該顯示的內容:

/**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;
      }
    }

請注意，我還將平板電腦查詢移到了移動查詢的上方，因為媒體查詢將從上到下順序執行，這就解釋了為什么之前會出現奇怪的結果。

希望這有所幫助！:)

我整理了你的例子，這樣你就能理解更多了。只要這樣做，它就能正常工作:

/*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;
  }
}