给定设置 class 的条件，如何有条件地设置媒体查询最小宽度像素？

Question

我要解决的问题：

我有一个可响应所有屏幕尺寸的列表，但用户更喜欢在屏幕上并排设置 2 个列表。问题是，这些列表的响应是检查屏幕宽度，而不是其容器的宽度。如果是 class one-list，就是屏幕的大小。如果它是 class two-list，由于列表是并排的，所以它是屏幕大小的一半。

我对这个问题的解决方案是简单地将媒体查询中的像素加倍，这意味着我可以更快地达到某些响应式样式（例如以 1200 像素而不是 600 像素开始移动样式）。这行得通！如果我手动将媒体查询中的像素加倍，一切正常。

此外，在某些固定的媒体查询中，由于屏幕太小而无法阅读，我会垂直并排排列列表。

然而在实践中，通过 css class 务实地检测 2-list 并因此更新媒体查询最小宽度和最大宽度屏幕尺寸被证明是困难的。

以下是我认为可行的...

$min_600: 600px;
$min_850: 850px;
$min_1024: 1024px;
$min_1400: 1400px;
$min_2000: 2000px;
$max_599: 599px;
$max_400: 400px;

.list.two-list {
    $min_600: 1200px !global;
    $min_850: 1900px !global;
    $min_1024: 2048px !global;
    $min_1400: 2800px !global;
    $min_2000: 4000px !global;
    $max_599: 1198px !global;
    $max_400: 800px !global;
}

@media only screen and (min-width: $min_600) {
...
}

...

这有效，除非我意识到变量总是被覆盖，即使 two-list class 没有被设置。换句话说，像素总是加倍。

如何完成我在这里想要做的事情？甚至可以使用 SCSS 变量吗？

有什么方法可以在特定条件下实用地设置媒体查询大小，比如 class 的存在？

谢谢

Answer 1

我意识到我想得太多了如何着手解决这个特定问题。我真的不需要 SASS/SCSS 个变量！

我可以将不同的媒体查询应用于不同的 classes（见下文）

此方法会创建重复的样式，并且会使代码的维护更加密集，并且更容易出现错误。这也是我引入 mixins 的原因。

@mixin list-style-min-600() {
    // Styling for list for min-width 600px media query
}

@media only screen and (min-width: 600px) {
    .list.one-list {
        // styling for one list
        @include list-style-min-600()
    }
}

@media only screen and (min-width: 1200px) {
    .list.two-list {
        // styling for one list, just kicks in later at 1200px 
        // rather than 600px
        @include list-style-min-600()
    }
}

这种方法的唯一问题是它不可扩展。我不能突然引入三列表或四列表，因为这意味着我必须添加新的媒体查询，专门针对那些每个都有 class 的情况。但对于我的用例来说，它会工作得很好。

给定设置 class 的条件，如何有条件地设置媒体查询最小宽度像素？

How to conditionally set media query min-width pixels given the condition that a class is set?

javascript

sass

media-queries

responsive-design

angular