CSSで条件分岐と変数と計算を使う
印刷画面と通常画面を切り替えるものってイメージでいた(メディアっていうし)
しかし画面サイズを条件式に加えることができる
:root 擬似クラスがグローバルスコープがわりに使える
calc()で計算できる
JSで取得できる
getComputedStyle(document.body).getPropertyValue("--toolbar-height")
stringなので単位を仮定したらこんな感じ
tsconst toolbarHeight = parseInt(
getComputedStyle(document.body)
.getPropertyValue("--toolbar-height")
.trim()
);
横幅が狭い時にツールバーの高さを縮めてボタンも小さくするcss
css:root {
--toolbar-height: 60px;
}
@media only screen and (max-width: 600px) {
:root {
--toolbar-height: 36px;
}
}
#toolbar {
height: var(--toolbar-height);
}
#toolbar svg {
height: calc(var(--toolbar-height) * 0.8);
margin: calc(var(--toolbar-height) * 0.1) 0 calc(var(--toolbar-height) * 0.1) 0;
}
css/* ボタン7つを３グループに分けるスペーサー */
#toolbar span.spacer {
margin-left: calc((100vw - var(--button-size) * 7) / 2);
}
余談
クラス名にパターンマッチもできる