CSSで条件分岐と変数と計算を使う

メディアクエリで条件分岐ができる

印刷画面と通常画面を切り替えるものってイメージでいた(メディアっていうし)

しかし画面サイズを条件式に加えることができる

:root 擬似クラスがグローバルスコープがわりに使える

calc()で計算できる

JSで取得できる

getComputedStyle(document.body).getPropertyValue("--toolbar-height")

stringなので単位を仮定したらこんな感じ

code:ts

const toolbarHeight = parseInt(

getComputedStyle(document.body)

.getPropertyValue("--toolbar-height")

.trim()

);

横幅が狭い時にツールバーの高さを縮めてボタンも小さくするcss

code:css

:root {

--toolbar-height: 60px;

}

@media only screen and (max-width: 600px) {

:root {

--toolbar-height: 36px;

}

height: var(--toolbar-height);

}

height: calc(var(--toolbar-height) * 0.8);

margin: calc(var(--toolbar-height) * 0.1) 0 calc(var(--toolbar-height) * 0.1) 0;

}

最近のCSSは便利！

code:css

/* ボタン7つを３グループに分けるスペーサー */

#toolbar span.spacer {

margin-left: calc((100vw - var(--button-size) * 7) / 2);

}

余談

クラス名にパターンマッチもできる