font-size: calc(100% + 1vw) はいいけれど

昨日のやつ少しコード書いてみた。サイズや配置を rem で指定することで、html 要素（root）の文字サイズの変更に合わせて全部変わる。

• calc(100% + 1vw) | JSFiddle

html {
  font-size: calc(100% + 1vw);
}

div {
  margin: 1rem 0;
}

.box {
  display: inline-block;
  padding: 1rem;
  background-color: black;
  color: white;
}

.border {
  border-bottom: .07rem solid black;
}

この指定にすると、ウィンドウ幅を変えてもすべての要素の関係は変わらない。だから、たとえばグリッドを途中でカラム落ちさせたいとかなったら、そのためにメディアクエリを書いてブレークポイントつくらないといけないかもしれない。

見たいものがウィンドウサイズに合わせて拡大する（または縮小する）のは素晴らしいことだけど、これが昨日言ったメディアクエリを減らすための手段とはならなそうだ。