Sassを使う前提です。
以下の理由で、変数で管理しておくのをおすすめします。
- サイト内で定義されているブレイクポイントが一目でわかる
- 後からブレイクポイントを修正する場合も一か所の修正で反映させることができる
自分は下記のように変数定義しています。
$breakpoint-mobile: 640px;
$breakpoint-tablet: 980px;メディアクエリはまとめて書いたり外部ファイル化することもできますが、要素ごとに記述するほうが効率がいいです。 既存のルールセットと離れた場所にメディアクエリの記述があると、修正のたびにあっちこっち行ったりきたりして手間がかかりますし、修正漏れが発生する確率が高くなります。 また、見通しが悪くなるのでメディアクエリごとのルールの影響が把握しづらいです。
自分は以下のようなmixinを定義して、
@mixin max-screen($break-point) {
@media screen and (max-width: $break-point) {
@content;
}
}
@mixin min-screen($break-point) {
@media screen and (min-width: $break-point) {
@content;
}
}
@mixin screen($break-point-min, $break-point-max) {
@media screen and (min-width: $break-point-min) and (max-width: $break-point-max) {
@content;
}
}こんな感じで使っています。
h1 {
font-size: 20px;
@include max-screen($breakpoint-tablet) {
font-size: 18px;
}
@include max-screen($breakpoint-mobile) {
font-size: 16px;
}
}
メディアクエリ適用外のルールを修正したらタブレットやモバイルのルールにどのような影響があるかが一目で把握できると思います。
上記のルールでメディアクエリを書いているとメディアクエリの記述がいたるところに出てくるので、ファイルサイズが大きくなりがちです。 ファイルサイズが気になる場合は、メディアクエリをひとつにまとめるプラグインの使用を検討しましょう。
実際に使用したことがないのでデファクトスタンダードがわからないのですが、以下のようなプラグインがあるようです。
http://parashuto.com/rriver/development/media-queries-workflow-using-sass-and-gulp