Responsive

レスポンシブ対応

Lism では、.-{prop}_{bp}形式のクラスと--{prop}_{bp}形式の変数の組み合わせによって、レスポンシブ対応を行います。

↓

例

.-p{ padding: var(--p); }

/* @sm ~ */
@container (min-width: 480px) {
  .-p_sm{ padding: var(--p_sm); }
}

/* @md ~ */
@container (min-width: 720px) {
  .-p_md{ padding: var(--p_md); }
}

↓

レスポンシブ対応の例

Example

リサイズ可能

<div class="-p:20 -p_sm -p_md -bd" style="--p_sm:var(--s30);--p_md:var(--s50)">
  <p>Example</p>
</div>

CSSプロパティ全てがレスポンシブ対応できるわけではありません。
どのプロパティが標準でブレイクポイント切り替えに対応しているかについては、Prop Class 一覧ページを参照してください。

SCSSファイルからカスタマイズを行うことで、プロパティごとにレスポンジブ対応を切り替えることもできます。

プロパティによってCSS実装が少し異なります

以下の２パターンがあります。

常に-{prop}変数で値が参照できるようになっているプロパティ
ブレイクポイントごとに単純に上書きされているプロパティ

↓

前者 1 の実装例

.-p{ padding: var(--p) }

@container (min-width: 480px) {
  .-p_sm {
    --p: var(--p_sm) !important;
    padding: var(--p_sm);
  }
}

常にCSS変数で値を参照できた方が便利だと判断した限られたプロパティ(p,m,g,fz,c,bgc,bdrs)のみがこのパターンで実装されています。

↓

後者 2 の実装例

.-d { display: var(--d) }

@container (min-width: 480px) {
  .-d_sm { display: var(--d_sm) }
}

コンテナクエリ・メディアクエリ

Lismでは、デフォルトでコンテナクエリを採用しています。

コンテナクエリでは、ブレイクポイントで値を切り替えるには先祖要素でコンテナ要素を定義しておく必要があることに注意してください。

（Lism でコンテナ要素を配置するには、.is--container(<Container>)が便利です。）

また、SCSSファイルからカスタマイズを行うことで、コンテナクエリではなくメディアクエリに切り替えることもできます。

ブレイクポイント

ブレイクポイントはモバイルファーストで定義しており、数値としては480px~1200pxまでの240px刻みで設定しています。
（特定のデバイスサイズに依存した数値は採用していません。）

サイズ表記	デフォルトの設定値
`sm`	`width >= 480px`
`md`	`width >= 720px`
(`lg`)	`width >= 960px`
(`xl`)	`width >= 1200px`

標準でサポートされているのはsm,mdまでです。lgサイズ以降のサポートは別途SCSSの設定ファイルのカスタマイズが必要です。

これらのブレイクポイントを自身のプロジェクトで使用する場合、.scssであれば次のようにして利用できます。

@use '../path/to/node_modules/lism-css/scss/query' as query;

@include query.cq('sm') {
  // Your styles for sm sizes(width >= 480px) ...
}
@include query.cq('md') {
  // Your styles for md sizes(width >= 720px) ...
}