如何根據屏幕大小在 JavaScript 中自動運行函數

Question

我正在做響應式網頁設計。 當我將屏幕縮小到平板電腦模式並單擊某些按鈕時，會應用某些 CSS 屬性（移動內容而隱藏其他內容）。 然后當我將屏幕放大回桌面大小時。 我希望屬性回到桌面版本。 我將如何實現這一目標？

當前的行為是當我回到桌面屏幕比例時按鈕的效果仍然存在。 預期的行為是，當我回到桌面屏幕比例時，適用於桌面的 CSS。

Answer 1

您可以訪問某些屬性，例如window.innerWidth ，您可以檢查這些屬性來決定是否運行您的函數。

那是針對 JavaScript 的。 如果您希望 CSS 響應屏幕大小，請檢查媒體查詢，例如：

@media (min-height: 680px) {
    .someClass {
        margin: 5px;
    }
}

Answer 2

您可以使用 CSS 媒體查詢。

@media screen and (max-width: 600px) and (min-width: 300px) {
  /* CSS for screen width between 300 and 600px */
}

使用 JavaScript，您可以監聽 resize 事件。

window.addEventListener("resize", function(e){
    console.log(window.innerWidth);
});