🕴🏼 🔖 ♓️ SCSSでのメディアクエリ-@ mediaScreenを使用するもう1つの便利な方法 🛕 👨🏻‍🎤 👪

こんにちは！

最近、Angularで構築されたプロジェクトでメディアクエリの問題が発生しました。作業を簡素化するためにミックスインを作成した理由を正確に覚えていませんが、結果を共有してフィードバックを受け取りたいと思っています。私は他の多くの同様の例に出会いましたが、私の仕事では、この特定の例を使用する方がより明確で便利です。

一般的に、便宜上、私は自分自身のために次の要件を作成しました。

画面サイズは個別にレンダリングする必要があります。これにより、動作を1か所でグローバルに変更できます（たとえば、「320px」の代わりに「xs」を送信するだけです）。

このメディアクエリとの混合は、複数の方向に発生する可能性があります（たとえば、常に最大幅だけではありません）。

Mixinは個別に使用して、内部で記述されているクラスをオーバーライドするか、親の本体で記述して、そのプロパティをオーバーライドすることができます。

それでは、必要な権限を定義しましょう。例えば：

$sizes: ("xs":320px, "sm":576px, "md":768px, "lg":992px, "xl":1200px);

まず、目的の範囲のプレフィックスと解像度を受け入れるミックスインを作成しましょう。この場合、制限があります。

@mixin media($minmax, $media) {
  @each $size, $resolution in $sizes {
    @if $media == $size {
      @media only screen and (#{$minmax}-width: $resolution) {
        @content;
      }
    }
  }
}

つまり、必要な画面解像度の名前を渡し、$ sizes変数で以前に宣言された値の中からその値を探します。それを見つけたら、渡されたminまたはmax（$ minmax変数）と一緒に置き換えます。

別のミックスインを含む使用例：

@mixin blocks-width {
  width: 400px;
  @include media("max", "md") {
    width: 100%;
  }
}

この簡単な例から、<768pxのブロック幅を400pxから100％に変更するミックスインを取得します。次の例でも同じ結果が得られます。

クラス内での使用例：

.blocks-width {
width: 400px;
  @include media("max", "md") {
    width: 100%;
  }
}

スタンドアロンメディアクエリとしての使用例：

.blocks-width {
width: 400px;
}

@include media("max", "md") {
.blocks-width {
    width: 100%;
}
}

しかし、明確な範囲のクエリを含むメディアクエリが必要な場合はどうなりますか（メディアクエリが機能する解像度を1つ指定してください）。ミックスインを少し拡張してみましょう。

個人的には、解像度を次のように説明すると便利です。mdの範囲が必要な場合は、smとmdの間の画面サイズを使用します。1つの解像度のみを渡すようにミックスインを書き直したい場合は、リストから前の値を見つける必要があります。これをすばやく行う方法が見つからなかったため、次の関数を作成する必要がありました。

@function getPreviousSize($currentSize) {
  $keys: map-keys($sizes);
  $index: index($keys, $currentSize)-1;
  $value: map-values($sizes);
  @return nth($value, $index);
}

それがどのように機能するかを確認するには、デバッグ：

@debug getPreviousSize('md');

次に、少しやり直したコード：

@mixin media($minmax, $media) {
  @each $size, $resolution in $sizes {
    @if $media == $size {
      @if ($minmax != "within") {
        @media only screen and (#{$minmax}-width: $resolution) {
          @content;
        }
      } @else {
        @if (index(map-keys($sizes), $media) > 1) {
          @media only screen and (min-width: getPreviousSize($media)+1) and (max-width: $resolution) {
            @content;
          }
        } @else {
          @media only screen and (max-width: $resolution) {
            @content;
          }
        }
      }
    }
  }
}

ロジックは前の機能と同じです。ただし、mdなどの範囲でのみメディアクエリを適用する場合は、ミックスインを呼び出すときに次のように記述します。

@include media("within", "md") {
  .blocks-width {
    width: 100%;
  }
}

その後、次のコンパイル済みcssが表示されます。

@media only screen and (max-width: 768px) and (min-width: 577px)
.blocks-width {
    width: 100%;
}

さらに、最小の画面サイズを指定すると（xsになります）、次に例を示します。

@include media("within", "xs") {
  .blocks-width {
    width: 100%;
  }
}

次に、0から対応する最小解像度までの範囲を取得します。

@media only screen and (max-width: 320px)
.blocks-widthh {
    width: 100%;
}

当然、これらのメディアクエリを別の方向に書き直すこともできますが、個人的には、大きいものから小さいものへのタイプ設定に慣れています。

清聴ありがとうございました！

UPD：限られた範囲の解像度が重ならないように、ミックスインがわずかに修正されました:)ご清聴ありがとうございましたE_STRICT

SCSSでのメディアクエリ-@ mediaScreenを使用するもう1つの便利な方法

More articles: