Question

我正在尝试在具有全局断点的scss上生成样式的常规结构，作为React项目上的媒体查询。可以重用结构来遵循我们声明为全局的媒体查询。我有点迷茫了，有什么主意吗？

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

谢谢。

Answer 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;
    }
}

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

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

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

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

或者如果这些媒体查询的用例有限（例如隐藏和显示元素），则可以定义包括所有变体的其他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';

对React项目进行全局媒体查询

1 个答案: