一、 核心邏輯：建立裝置專屬的顯示類別
這個技巧的核心在於預先定義好兩組 CSS 類別。我們將桌機顯示定義為 .pc，手機顯示定義為 .ph。在預設狀態下（通常是桌機視角），.pc 區塊是顯示的，而 .ph 區塊則是隱藏的。這就像是為網頁元素貼上標籤，告訴瀏覽器：「這個是電腦版專用，那個是手機版專用」。這種標籤化的思維，能讓你從繁瑣的 CSS 樣式微調中解脫，轉向更直覺的結構化管理。
二、 媒體查詢：定義切換裝置的「分水嶺」
為了實現自動切換，我們使用了 @media 媒體查詢來偵測螢幕寬度。在你的技巧中，以 991px 為臨界點（Breakpoint）：當螢幕寬度小於或等於 991px 時，瀏覽器會自動套用大括號內的樣式。這時，原本隱藏的 .ph 會轉為顯示（display: block），而原本顯示的 .pc 則會消失（display: none）。使用 !important 則能確保這套顯示邏輯擁有最高優先權，不會被其他複雜的樣式意外覆蓋。
.pc {display: block;}
.ph {display: none;}
@media (max-width: 991px){
.ph {display: block;}
.pc {display: none;}
}
三、 HTML 實作：像堆積木一樣簡單
在 HTML 結構中應用這個技巧非常直觀。假設你有一個導覽列，在電腦上想顯示完整的橫式選單，但在手機上想顯示漢堡選單（Hamburger Menu），你只需要這樣寫：
<nav class="pc">這裡是電腦版橫式選單</nav>
<nav class="ph">這裡是手機版漢堡按鈕</nav>
當使用者從桌機縮小視窗到手機尺寸時，兩者會自動交換位置。這種方法不需要去改動選單內的 CSS 佈局，只需決定「誰該在什麼時候出現」，對於快速原型製作或修改現有網頁非常有效。
四、 開發優勢：提升維護效率與邏輯清晰度
為什麼這個小技巧如此受歡迎？首先，它極大化地減少了重複代碼，你不需要為每個需要隱藏的區塊單獨寫 Media Query。其次，它讓 HTML 的意圖變得非常明確，任何維護人員看到 .pc 類別，立刻就能明白該區塊的顯示邏輯。最後，它提供了極高的靈活性，無論是圖片、按鈕還是整個側邊欄，只要加上 Class 就能立即生效，是每位前端開發者工具箱中必備的快速通關秘訣。