Foundation-media-queries

財団-メディアクエリ

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

Foundationは、以下のメディアクエリを使用して分類範囲を作成します-

• Small -任意の画面に使用されます。
• 中-640ピクセル以上の画面に使用されます。
• 大-1024ピクセル以上の画面に使用されます。

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

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

ブレークポイントを変更する

アプリケーションがFoundationのSASSバージョンを使用している場合、ブレークポイントを変更できます。 以下に示すように、設定ファイルの_ $ 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（）_ mixinを使用して、メディアクエリを記述できます。
• _down_または_only_キーワードとブレークポイント値を使用して、次のコード形式に示すようにメディアクエリの動作を変更します-

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

  //code for medium screens only
   @include breakpoint(medium only) { }
}

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

ブレークポイント関数

• 内部関数を使用して、breakpoint（） mixinの機能を使用できます。
• _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_関数は、現在のブレークポイント名として_small _、 medium 、 large_を表示します。 *以下に示すように_MediaQuery.get_関数を使用してブレークポイントのメディアクエリを取得できます-

Foundation.MediaQuery.get('small')

Sassリファレンス

変数

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

Sr.No.	Name & Description	Type	Default Value
1	$breakpoints* breakpoint（） mixinを使用してメディアクエリを書き込むために使用できるブレークポイント名です。	Map	small: 0px 中：640px 大：1024px xlarge：1200px xxlarge：1440px
2	$breakpoint-classes _ $ breakpoint-classes_変数を変更することにより、CSSクラスの出力を変更できます。	List	small medium large

ミックスイン

Mixinsは、FoundationコンポーネントのCSSクラス構造を構築するためのスタイルのグループを作成します。

ブレークポイント

breakpoint（） mixinを使用してメディアクエリを作成し、次のアクティビティを含めます-

• 文字列が渡された場合、mixinは_ $ breakpoints_マップ内の文字列を検索し、メディアクエリを作成します。
• ピクセル値を使用している場合は、_ $ rem-base_を使用してem値に変換します。
• rem値が渡されると、単位がemに変更されます。 *em値を使用している場合は、そのまま使用できます。

次の表は、ブレークポイントで使用されるパラメータを指定します-

Sr.No.	Name & Description	Type	Default Value
1	$value* ブレークポイント名、px、rem、またはem値を使用して値を処理します。	keyword or number	None

関数

• ブレークポイント *

breakpoint（） mixinを使用して、一致する入力値を持つメディアクエリを作成します。

次の表は、ブレークポイントで使用される可能な入力値を指定します-

Sr.No.	Name & Description	Type	Default Value
1	$val* ブレークポイント名、px、rem、またはem値を使用して値を処理します。	keyword or number	small

JavaScriptリファレンス

関数

機能には2種類あります-

• .atLeast -画面を確認します。 少なくともブレークポイントとしては幅が広い必要があります。
• .get -ブレークポイントのメディアクエリを取得するために使用されます。

次の表は、上記の機能で使用されるパラメータを指定します-

Sr.No.	Name & Description	Type
1	size 指定された関数のブレークポイントの名前をそれぞれ確認および取得します。	String