jQuery-如果屏幕小於指定的寬度（響應）

Question

如果頁面的寬度小於1200px並作出響應，該如何彈出警報？

謝謝！

Answer 1

您可以使用類似斷點模塊的東西。 然后，您設置一個斷點以在1200px處觸發並顯示一個對話框，並添加一個更改布局的css類，或使用直接的javascript進行更改。

breakpoints(1200, function(oldPoint, newPoint) {
  alert('The screen width just changed');
});

如果您只想要本機jQuery：

$(window).resize(function() {
  var width = $(window).width();
  if (width < 1200){
    alert('Your screen is too small');
  }
});

---

為了完整起見，這里使用CSS媒體查詢（仍然不處理警報，但是可以幫助使網站“響應”）。

/* some normal style */
.myclass {
  font-size: 22pt;
}

/* alter the style when the screen's smaller */
@media screen and (max-width: 1200px) {
  .myclass {
    font-size: 18pt;
  }
}

Answer 2

對於未來的Google員工來說，2019年的解決方案是使用JavaScript的window​.match​Media() 。 所有主要瀏覽器和IE 10及更高版本均支持該功能。

您可以像這樣使用它：

if (window.matchMedia('(max-width: 1200px)').matches) {
    // functionality for screens smaller than 1200px
}

要使此響應，您只需要將其包裝在一個resize函數中：

$(window).resize(function() {
    if (window.matchMedia('(max-width: 1200px)').matches) {
        // functionality for screens smaller than 1200px
    }
});

可以說，這是檢查屏幕尺寸的最簡單方法，並且不會膨脹代碼。

檢查有關Mozilla的文檔匹配媒體 ，以了解更多，這一次關於更多信息編程測試媒體查詢 。