CSSを使った二段組もどき 3

Elasticレイアウト

Yahoo!Yahoo! JAPAN の新デザインは,固定幅ではなく,文字を拡大するとコンテンツの幅も拡大するようになりました。このようなレイアウトをelastic layoutといいます。これは固定幅レイアウトで幅をピクセル単位ではなく文字幅(em)単位で指定することにより実現できます。

ただ,文字サイズに比例していくらでも拡大・縮小するのではなく,最小幅(min-width)・最大幅(max-width)を指定することがよくあります。このページは一つ前の CSSを使った二段組もどき 2 のCSSのbody部分に width,min-width,max-width を次のように加えてみました。

body {
  width: 60em;
  min-width: 750px;
  max-width: 95%;
  margin: 3%;
  line-height: 1.6;
}