0

ときどき、メディア クエリ内の 1 つの変数を変更して、

HTML:

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

LESS (機能しません): 

@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 に答える