Question

由于分割页面并让我们调整其中一个容器的效果。我必须为响应式添加更多样式，所以我向这个可调整大小的容器添加一个代表我当前断点的类（xs，sm，md，lg）

喜欢这个

if ( ui.position.left <= 480 ) { /* It represent it's width, I am using this as the drag function of draggable */
                clase = 'xs';
            } else if ( ui.position.left <= 768 ) {
                clase = 'sm';
            } else if ( ui.position.left <= 992 ) {
                clase = 'md';
            } else {
                clase = 'lg';
            }
       $('.element').removeClass('xs sm md lg').addClass(clase);

例如：

@media (max-width: 320px)
  h2 {
    font-size:12px;
  }
}

我现在必须添加：

   .xs h2 {
     font-size:12px
   }

有没有办法不必复制样式？（我有几个街区）

像我这样的工作

.xs, @media (max-width:320px) {
   h2 {
     font-size: 12px
   }
}

Answer 1

您可以使用postcss和插件https://github.com/hail2u/node-css-mqpacker。这很容易，工作正常。你可以使用带有SCSS的postcss。

Answer 2

使用媒体查询时，您通常具有全局默认值，然后在某个谓词为真时覆盖查询中的默认值（例如，窗口小于320像素）。

在您的示例中，您希望使用与全局默认值相同的值以及媒体查询中的重写值。恕我直言，这没有任何意义。

分组.className +媒体查询？

2 个答案: