react 项目的全局媒体查询

Question

我正在尝试在具有全局断点的 scss 上生成样式的一般结构，作为反应项目上的媒体查询，可以重用结构来遵循我们声明为全局的媒体查询。 我对这个有点迷茫，有什么想法吗？

当我的意思是全局时，我们可以在项目的根部定义断点，我们可以在组件上使用任何引用。

提前致谢。

Answer 1

我想到了三种方法：

1. 您可以创建一个variables.scss 文件，您可以在其中写入断点的值：

$sm: 576px; $md: 768px; $lg: 992px; $xl: 1200px;

并在您的 scss 中使用以下变量：

@media only screen and (min-width: $sm) {
    .container {
        .max-width: 450px;
    }
}
@media only screen and (min-width: $md) {
    .container {
        .max-width: 650px;
    }
}
@media only screen and (min-width: $lg) {
    .container {
        .max-width: 900px;
    }
}
@media only screen and (min-width: $xl) {
    .container {
        .max-width: 1000px;
    }
}

1. 或者您可以在 mixins.scss 文件中提到的变量来创建一些媒体查询混合：

   @mixin small { @media only screen and (min-width: $sm) { @content; } }

然后，在你的主要 scss 代码中使用这些 mixin：

.container {
    @include small {
        max-width: 450px;
    }
    ...
}

1. 或者，如果这些媒体查询的用例有限（例如隐藏和显示元素），您可以定义包含所有变体的其他 mixin：

   $displays: none inline inline-block block table table-cell table-row flex inline-flex; $sizes: ( sm: $sm, md: $md, lg: $lg, lg: $xl ); @each $display in $displays: @each $size-key $size in $sizes { .display-#{size-key}-#{display} { display: $display !important; } } }

关于导入文件的注意事项： 我个人会将我的所有帮助程序 scss（变量、mixins 等）导入项目根目录中名为 styles/index.scss 的文件中，其中包括规范化和其他我要定义的全局规则，然后将此文件导入我的其他 scss 文件中：

// styles/index.scss
@import './variables.scss';
@import './mixins.scss';
...

// container.scss
@import './styles/index.scss';