javascript - 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
    }
});

这可以说是检查屏幕大小的最简单方法，并且不会使代码膨胀。

查看有关match​Media的 Mozilla 文档以了解更多信息，并查看有关以编程方式测试媒体查询的更多信息。