メディアクエリで変数を使用する CSS

メディアクエリ内で変数を使用する

今、メディアクエリ内で変数の値を変更したいです。

ヒント：メディアクエリは、異なるデバイス（ディスプレイ、タブレット、スマートフォンなど）に対して異なるスタイルルールを定義するために使用されます。メディアクエリに関する知識を「メディアクエリ」の章で学ぶことができます。

ここでは、まず .container クラスに --fontsize という名前の新しいローカル変数を宣言します。その値を 25ピクセルに設定し、.container クラスでそれを使用します。次に、@media ルールを作成し、「ブラウザの幅が 450ピクセル以上の場合、.container クラスの --fontsize 変数の値を 50ピクセルに変更する」という内容にします。

これは完全な例です：

实例

/* 变量声明 */
:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
.container {
  --fontsize: 25px;
}
/* 样式 */
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
  font-size: var(--fontsize);
}
@media screen and (min-width: 450px) {
  .container {
    --fontsize: 50px;
  }
}

実際に試してみる

これは別の例です。その中で、私たちは @media ルール中の --blue 変数の値も変更しました：

实例

/* 变量声明 */
:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
.container {
  --fontsize: 25px;
}
/* 样式 */
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
  font-size: var(--fontsize);
}
@media screen and (min-width: 450px) {
  .container {
    --fontsize: 50px;
  }
   :root {
    --blue: lightblue;
  }
}

実際に試してみる

ブラウザサポート

テーブルの数字には、その属性を完全にサポートする最初のブラウザバージョンが記載されています。

関数
var() 49.0 15.0 31.0 9.1 36.0

CSS var() ファンクション

関数 説明
var() CSS 変数の値を挿入してください。