メディア クエリで変数を使用する CSS
メディア クエリでの変数の使用
ここで、メディア クエリ内の変数値を変更したいと考えています。
ここでは、最初に --fontsize という名前の新しいローカル変数を宣言します。.containerクラス。その値を 25 ピクセルに設定します。次に、.containerさらに下のクラス。次に、@media「ブラウザの幅が 450px 以上の場合、ブラウザの --fontsize 変数値を変更する」というルール.containerクラスを 50px にします。」
完全な例を次に示します。
例
/* Variable declarations */
:root {
--blue: #1e90ff;
--white: #ffffff;
}
.container {
--fontsize: 25px;
}
/* Styles */
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;
}
}
--blue 変数の値も変更する別の例を次に示します。@mediaルール：
例
/* Variable declarations */
:root {
--blue: #1e90ff;
--white: #ffffff;
}
.container {
--fontsize: 25px;
}
/* Styles */
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() 関数
|
財産 |
説明 |
|---|---|
| だった（） | CSS 変数の値を挿入します |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。