如何按样式制作条件？答案

【问题标题】：How to make condition by styles?如何按样式制作条件？
【发布时间】：2021-08-17 08:14:23
【问题描述】：

我有我的scss 桌面版和移动版样式：

.categories {
  width: 250px;
  min-height: 100vh;
  background-color: #fff;
  margin-right: 40px;
  min-width: 250px;

  @media only screen and (max-width: 965px) {
    width: 100%;
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    margin: 0 auto;
    flex-direction: column;
    padding: 20px;
  }

有没有机会在vue 文件中创建这样的mounted 方法来检查用户是使用移动版还是桌面版？

作为伪代码示例：

async mounted() {
   if (@media) {
    // do something
 }
}

【问题讨论】：

你需要这个用于什么目的？
我有一个过滤器，其中包含移动版和桌面版上的类别，我需要确保这些过滤器默认不显示在移动版上（直到用户单击按钮）那里有很多代码，所以我不能显示它。我可以只添加if 条件，但它不起作用，因为如果它默认为 false，它根本不会在桌面版本上显示。

标签： javascript html css vue.js express

【解决方案1】：

css 中的媒体查询基于窗口大小工作。您也可以使用 javascript 获得相同的窗口大小

window.innerWidth
window.innerHeight

并在 if 条件下使用这些变量将完成您的工作。

如果您希望您的视图在窗口调整大小时动态更改，则必须在窗口调整大小时创建一个自定义事件，以便在窗口调整大小时重新安装组件

window.resize = <your event handler>

【讨论】：

是的，这就是我要找的，谢谢！

【解决方案2】：

window.resize 会产生性能问题，因此我建议改用window.MatchMedia()。 window.resize 每次调整窗口大小时触发 - 在每个像素处 - 所以不仅仅是在调整大小“完成”时。

使用window.MatchMedia() 方法，您可以定义断点（或断点数组）。然后添加一个事件侦听器，该侦听器仅在您实际到达断点时触发。

在你的情况下，它可能看起来像这样：

const mediaQuery = '(max-width: 965px)';
const mediaQueryList = window.matchMedia(mediaQuery);

mediaQueryList.addEventListener('change', event => {
    console.log(window.innerWidth);
  if (event.matches) {
    console.log('The window is now 965px or under');
  } else {
    console.log('The window is now over 965px');
  }
});

您可以在此处详细了解它：https://webdevetc.com/blog/matchmedia-events-for-window-resizes/)

【讨论】：