CSS/SCSS 媒体查询或类

Posted 2023-03-06

【中文标题】CSS/SCSS 媒体查询或类

【英文标题】：CSS/SCSS media query or class

【发布时间】：2017-03-13 08:11:21

【问题描述】：

我需要使用媒体查询和类运行相同的样式。 例如，当屏幕小于 500 像素或具有 .active 类时，我需要设置 200 像素。 如何以聪明的方式做到这一点？没有复制/粘贴代码？

不工作：

@media(max-width: 500px), .active 
      width: 200px;
    

【参考方案1】：

在 css 中，, 用于分组，当相同的规则适用于多个选择器时。

但是，media queries 不是选择器。它们由一个媒体类型和零个或多个表达式组成，用于检查particular media features 的条件。因此，, 在这种情况下将不起作用。

如果你想保持干燥，你可以试试他们的 mixin 功能。

例如

@mixin smallWidth() 
    width: 200px;


.elem 
    &.active 
        @include smallWidth;
    

    @media only screen and (max-width : 500px) 
        @include smallWidth;
    

【讨论】：

那是和，问题是或

【参考方案2】：

混合是一个简单的解决方案，但它们在最终输出中复制了 CSS。更好的解决方案可能是完全反转逻辑。

在布尔代数中，德摩根定理指出A || B 与!(A && B) 相同。就您而言，这意味着以移动优先的方式考虑您的问题：

.elem 
  width: 200px;

  @media (min-width: 501px) 
    &:not(.active) 
      width: auto; // or whatever
    
  

【讨论】：

这就是我的想法。谢谢。

【参考方案3】：

CSS 没有提供“当应用媒体查询或给定类时”的方式。

使用纯 CSS 你只能：

.active 
    width: 200px;


@media(max-width: 500px) 
      * 
          width: 200px;
      

使用 SASS，您可以使用 mixin，但对于这样的单个规则来说，它并不是很有效：

@mixin my-width 
    width: 200px;


.active 
    @include my-width;


@media(max-width: 500px) 
      * 
          @include my-width;
      

【参考方案4】：

试试这个。

@media only screen and (max-width: 500px) 
    .active 
          width: 200px;
        
    

【讨论】：

您能解释一下“仅屏幕”的作用吗？ :)

那是和，问题是或

@Nelson Tan，谢谢，但这不适用于我。我需要 OR 查询。现在只有在有 .active 类时才添加宽度。

@jogoe 检查此链接***.com/questions/8549529/…

【参考方案5】：

你必须声明媒体和你的班级分开：

@media(max-width: 500px)  .active 
        width: 200px;
    

【讨论】：

那是和，问题是或