0

有时我希望我可以只更改媒体查询中的一个变量，然后

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已设置并应用于所有类。但是，我遇到了这种肮脏的解决方法：

较少的：

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

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

4

1 回答 1

1

我不能肯定地证明，但所提出的em方法对我的口味来说似乎太老套了（而且它不会使编码器轻松确定元素的高度）。我建议使用媒体查询，因为它们打算使用，并且只需构建一个 mixin 来获取值，如下所示：

较少的

@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;
}
于 2013-02-19T19:42:27.043 回答