如何根据屏幕大小在 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);
});