編輯問題，以包括預期行為、特定問題或錯誤以及重現問題所需的最短代碼。這將有助于其他人回答問題。

這就是媒體查詢的工作方式。請看我下面的例子和解釋它的評論。按下& quot運行代碼示例& quot按鈕，然后單擊& quot整頁& quot鏈接。現在調整瀏覽器窗口的大小，以查看不同寬度下應用的不同樣式。

請注意媒體詢問的書寫順序。當瀏覽器寬度改變時，您需要它們覆蓋以前的大小。

const display=document.querySelector('#size-display');
const resizeFn=()=>{display.innerHTML = window.innerWidth;};
window.addEventListener('resize',resizeFn);
resizeFn();

h1 {
  /*Default styles to apply*/
  color: #333;
  border: 1px solid green;
}

@media (max-width: 900px){
  /*
  These styles override any other styles when: the screen has a maximum width of 900px.
  Another way of saying that is: the screen is 899px wide or smaller
  */
  h1{
    color: blue;
    background-color: #CCC;
  }
}

@media (max-width: 767px){
  /*
  These styles override any other styles when: the screen has a maximum width of 767px.
  Another way of saying that is: the screen is 766px wide or smaller
  */
  h1{
    color: red;
  }
}

<div>Width: <span id="size-display"></span>px</div>

<h1>Test</h1>

我推薦使用新的語法，它更容易理解。

@media (width <= 767px) {
  color: red;
}

所以我們寫& quot如果寬度小于或等于767，則..."