財団-メディアクエリ

メディアクエリは、幅、高さ、色などのメディア機能を含み、指定された画面解像度に従ってコンテンツを表示するCSS3モジュールです。

Foundationは、次のメディアクエリを使用して内訳範囲を作成します-

Small −任意の画面に使用されます。
Medium −640ピクセル以上の画面に使用されます。
Large −1024ピクセル以上の画面に使用されます。

ブレークポイントクラスを使用して、画面サイズを変更できます。たとえば、次のコードスニペットに示すように、小さいサイズの画面には.small-6クラスを使用し、中サイズの画面には.medium-4クラスを使用できます。

<div class = "row">
   <div class = "small-6 medium-4 columns"></div>
   <div class = "small-6 medium-8 columns"></div>
</div>

ブレークポイントの変更

アプリケーションがSASSバージョンのFoundationを使用している場合は、ブレークポイントを変更できます。以下に示すように、設定ファイルの$ breakpoints変数の下にブレークポイント名を配置できます。

$breakpoints: (
   small: 0px,
   medium: 640px,
   large: 1024px,
   xlarge: 1200px,
   xxlarge: 1440px,
);

$ breakpoint-classes変数を変更することにより、設定ファイルのブレークポイントクラスを変更できます。CSSで.largeクラスを使用する場合は、以下に示すように、リストの最後に追加します。

$breakpoints-classes: (small medium large);

CSSで.xlargeクラスを使用し、次に示すように、このクラスをリストの最後に追加するとします。

$breakpoints-classes: (small medium large xlarge);

SASS

ブレークポイントミックスイン

@includeと一緒にbreakpoint（）ミックスインを使用して、メディアクエリを記述できます。
次のコード形式に示すように、メディアクエリの動作を変更するには、ブレークポイント値とともにdownまたはonlyキーワードを使用します。

.class_name {
   // code for medium screens and smaller
   @include breakpoint(medium down) { }
   
   // code for medium screens only
   @include breakpoint(medium only) { }
}

デバイスの向きまたはピクセル密度には、縦向き、横向き、網膜の3つのメディアクエリを使用できます。これらは幅ベースのメディアクエリではありません。

ブレークポイント関数

内部関数を使用して、breakpoint（）ミックスインの機能を使用できます。
ブレークポイント（）機能は、独自のメディアクエリを記述するために直接使用することができます-

@media screen and #{breakpoint(medium)} {
   // code for medium screens and up styles
}

JavaScript

メディアクエリの操作

Foundation JavaScriptは、以下に指定されているように、Foundation.MediaQueryオブジェクトの現在のブレークポイント名にアクセスするためのMediaQuery.current関数を提供します-

Foundation.MediaQuery.current

MediaQuery.currentの機能表示小規模、中、大電流のブレークポイントの名前として。
以下に示すように、MediaQuery.get関数を使用してブレークポイントのメディアクエリを取得できます-

Foundation.MediaQuery.get('small')

Sassリファレンス

変数

次の表に、コンポーネントのデフォルトスタイルをカスタマイズするために使用できるSASS変数を示します。

シニア番号	名前と説明	タイプ	デフォルト値
1	$breakpoints これは、breakpoint （）ミックスインを使用してメディアクエリを書き込むために使用できるブレークポイント名です。	地図	小：0px ミディアム：640px 大：1024px xlarge：1200px xxlarge：1440px
2	$breakpoint-classes $ breakpoint-classes変数を変更することにより、CSSクラスの出力を変更できます。	リスト	小中大