Question

有时候我可以在媒体查询中更改单个变量并

HTML：

<div id="wrap">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

少（不起作用）：

@base: 1000px;

@media all and (max-width: 768px) {
  @base: 600px;
}

.child1 {
  // 500px normally, 300px on small screens
  height: 0.5 * @base;
}
.child2 {
  // 250px normally, 150px on small screens
  height: 0.25 * @base; 
  }

这当然不起作用，因为在编译时，@base已设置并应用于所有类。但是，我遇到了这个肮脏的解决方法：

LESS：

#wrap 
    {
    font-size: 1000px;
    @media all and (max-width: 768px) {
      font-size: 600px;
    }
    .child1 {
      // 500px normally, 300px on small screens
      height: 0.5em;
    }
    .child2 {
      // 250px normally, 150px on small screens
      height: 0.25em; 
      }
    }

假设我的元素中实际上没有任何文本（或者文本只出现在叶节点中并且明确地设置了它们的字体大小），使用这种方法有什么严重的缺点吗？

Answer 1

我无法证明这一点，但提议的em方法对我来说似乎太过苛刻（并且它不会使编码器很容易确定元素的高度）。我建议使用媒体查询，因为它们是打算使用的，只需构建一个mixin来获取值，如下所示：

<强> LESS

@base: 1000px;
@smallBase: 600px;

.childHeights(@base) {
  // 500px normally, 300px on small screens
  .child1 {
  height: 0.5 * @base;
  }
  // 250px normally, 150px on small screens
  .child2 {
    height: 0.25 * @base;
  }
}

@media all and (max-width: 768px) {
  .childHeights(@smallBase);
}

.childHeights(@base);

CSS输出

@media all and (max-width: 768px) {
  .child1 {
    height: 300px;
  }
  .child2 {
    height: 150px;
  }
}
.child1 {
  height: 500px;
}
.child2 {
  height: 250px;
}

在类型以外的东西上使用em作为响应式样式

1 个答案: