Responsive design 将em用于除类型之外的响应样式

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

HTML:

更少（不起作用）：

这当然不起作用，因为在编译时，

@base

被设置并应用于所有类。然而，我遇到了一个肮脏的解决办法：

更少：

#换行
{
字体大小：1000px；
@介质和全部（最大宽度：768px）{
字体大小：600px；
}
.儿童1{
//通常为500px，小屏幕上为300px
高度：0.5em；
}
.儿童2{
//通常为250像素，小屏幕上为150像素
高度：0.25em；
}
}

---

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

我不能确定，但提议的

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

---

我不确定我是否真的理解了你的问题，但为什么你在“正常”CSS之前声明你的媒体查询？我建议你先使用移动，这意味着你从小屏幕设计开始，然后再使用“移动优先”实际上根本不会改变方法。问题是使用

em

单位设置方框大小和媒体查询更改整个元素子树的字体大小是否安全。

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