おれ ここ めも かきなぐる おまえ ここ よむ なぐる

デバイスをターゲッティングしないMedia Queries

20:21

デバイスを対象にしてMedia Queriesをつかってスタイルシートを分けるという考え方は破綻しそうなことがわかってきました。iPadとiPhoneだけなら「max-device-widthで完璧に拾える！勝つる！！１」みたいな感じですが、こうラフレシアが百花繚乱な状態になってくると、「こいつ…landscapeとportraitでmax-device-width変わりやがるッ！」みたいな危惧がまとわりついて頭から離れないですよね。全部買って試せる人は試せばいい。

じゃぁどうするかというと僕もまだ全然まとまってないんで、コードでトーク。

#contents {
  max-width: 960px;
  font-size: 16px;
}

/* 720px = 960px * (12px / 16px) */
@media screen and (max-width: 720px) {
  font-size: 12px;
}

body > header h1 a {
  display: block;
  float: left;
  width: 120px;
} 

body > header nav ul {
  float: right;
  width: 180px;
}

/* 300px = 120px + 180px */
@media screen and (max-width: 300px) {
  body > header h1 a {
    float: none;
  }

  body > header nav ul {
    float: none;
  }
}

みたいな「どうデザインしたいのか」ということを中心にしたMedia Queriesの書き方の方が良いんじゃないかと思う。狭い画面では少し文字を小さくしたいので文字の小さくなる割合に応じて切り替えるポイントを探るとか、ロゴとナビの長さが足りなくなった場合にfloatを解除するとかそういうアプローチ。

普通にCSSで書こうとするとメンテナンス性が非常に悪いのでSassとか必須に近いです…。

There Is No Mobile.とかWeb Design Is Responsive Design.みたいなキャッチーな言葉に影響を受けてこんなことを考えてみましたまる

ツイートする