LoginSignup
9

More than 5 years have passed since last update.

MediaQueriesを横着して書く方法@Sass

Last updated at Posted at 2016-11-30

Sassのmixin機能を利用して、冗長なメディアクエリを簡単に書きます。

まずブレイクポイントは変数にします

BootStrapの設定を参考に、4デバイスを想定しました。
実のところPCかスマホだけで十分!という場合も少なくないですが、せっかくなので4つとも使います。損はないです。

//== Screen Size
$screen-xs: 480px !default; //Extra small screen(xs)->smartphone
$screen-sm: 768px !default; //Small screen(sm) ->tablet
$screen-md: 992px !default; //Medium screen(md) ->desktop
$screen-lg: 1200px !default; //Large screen(lg) ->wide desktop

Mixinを定義します

@contentディレクティブでコンテントブロックを渡していきます。
デバイス略称(lg|md|sm|xs)を引数として、mq()というmixinを定義してます。

下2つ(pc/sp)は横着の結果生まれました。
モバイルファースト(sp)で作った後、申し訳程度のPC対応するときに重宝しました。悪手なんでしょうけど、暫定処置としてよく使ってます。
可読性のため端折ってますが、実務に組み込む場合は変数をMixin用に置き換えて管理したり、もう少しちゃんと作った方が良いです。

@mixin mq($DEVICE) {
    // Large screen / wide desktop
    @if $DEVICE == "lg" {
        @media (min-width: $screen-lg) {
            @content;
        }
    }
    // Medium screen / desktop
    @else if $DEVICE == "md" {
        @media (min-width: $screen-md) and (max-width: ($screen-lg - 1)) {
            @content;
        }
    }
    // Small screen / tablet
    @else if $DEVICE == "sm" {
        @media (min-width: $screen-sm) and (max-width: ($screen-md - 1)) {
            @content;
        }
    }
    // Extra small screen / smartphone
    @else if $DEVICE == "xs" {
        @media (max-width: ($screen-sm - 1)) {
            @content;
        }
    }
    // ★PC★ (md & lg)
    @else if $DEVICE == "pc" {
        @media (min-width: $screen-md) {
            @content;
        }
    }
    // ★SP★ (xs & sm)
    @else if $DEVICE == "sp" {
        @media (max-width: ($screen-md - 1)) {
            @content;
        }
    }
}

実際書いてみる

メディアクエリの管理方法は様々ですが、ルールセットの中に書いてしまうのが手軽で良いです。スコープもわかりやすいし。
別々にしちゃうとどうも忘れるというか、そもそも別ける手間がめんどくさくてつらい。

.banner {
  margin: 0;
  @include mq(lg) {
    width: 512px;
  }
  @include mq(md) {
    width: 256px;
  }
  @include mq(sm) {
    width: 128px;
  }
  @include mq(xs) {
    width: 64px;
  }
}

と書くと、以下のようにうまいこと展開してくれます。

.banner {
  margin: 0;
}
@media (min-width: 1200px) {
  .banner {
    width: 512px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .banner {
    width: 256px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .banner {
    width: 128px;
  }
}
@media (max-width: 767px) {
  .banner {
    width: 64px;
  }
}

大事なこと

頑張ってまとめるように書いてもとっ散らかるのがお約束でが、CSS MQPackerという神プラグインが自動でひとまとめにしてくれます。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9