如何为 Reactjs 使用媒体查询语法答案

【问题标题】：How to use Media query syntax for Reactjs如何为 Reactjs 使用媒体查询语法
【发布时间】：2022-07-12 01:50:36
【问题描述】：

我在 react js 项目中工作，我想使用以下断点区分中屏幕或大屏幕或小屏幕

// Small
@media (max-width: 575px) {}

// Medium
@media (max-width: 990px) {}

// Big
@media {}

【问题讨论】：

【解决方案1】：

我使用样式表来实现响应性——特别是预处理器 Sass。有一个 React 包和一切。如果这对您有用，您可以使用一个简单的 mixins 文件并将其导入您可能正在使用的任何其他 scss 文件中。

在你的 mixins.scss 文件中：

@mixin tablet {
  @media (min-width: 768px) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: 1280px) {
    @content;
  }
}

然后在您想要使用这些断点的任何其他 SCSS 文件中：

@use "../../styles/partials/mixins" as *;

.class {
   @include desktop {
     display: flex;
   }
}

如果您尝试在更改断点时执行 JS 代码，这将不适用。我有一个例子，如果需要，我可以挖掘出来。

【讨论】：