WordPress 管理者メニュー #wpadminbar (body クラス .admin-bar) のメディアクエリ切り替えポイント（px）

WordPressにログインしている状態では画面上部に管理者メニュー #wpadminbar（以下、.admin-bar）が表示されますが、CSSでpositionプロパティでfixedやstickyにて固定する際に.admin-barと重なってしまう場合があります。

.admin-barに対応したCSSを作成するために、メディアクエリ（@media）の切り替えポイント（px）とメディアクエリの例（CSSソースコード）について備忘録として残します。

.admin-bar のメディアクエリ（@media）切り替えポイント（px）について

WordPressの.admin-barは画面サイズによって高さが可変します。また、画面サイズによってヘッダー上部に固定されます。

以下が高さと固定の可変域をまとめたものです。

.admin-bar のメディアクエリ（@media）ソースコード例

例えば、以下のソースコードでは、テーブルのヘッダーセクション（table thead tr th）に対してクラス.stickyを追加しpositionプロパティstickyを適用、スクロールに応じてテーブルのヘッダーセクションを画面上部に固定しようとするものです。

table thead tr th.sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 1;
}
table thead tr th.sticky::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	width: 100%;
	height: 100%;
	border: 1px solid #eee;
}
@media screen and (min-width: 601px) {
	body.admin-bar table thead tr th.sticky {
		top: 46px;
	}
}
@media screen and (min-width: 783px) {
	body.admin-bar table thead tr th.sticky {
		top: 32px;
	}
}

テーブルのヘッダーセクションを固定するには table thead tr th.sticky（table thead tr th.sticky::before）の記述のみで問題ありませんが、その場合は.admin-barと重なってしまいます。

.admin-barは601pxからヘッダーに固定されますので、@media screen and (min-width: 601px) 画面サイズが601px以上の場合はtopプロパティで46pxを適用、@media screen and (min-width: 783px) 画面サイズが783px以上の場合はtopプロパティで32pxを適用することで.admin-barとの重なりを回避することができます。