メディアクエリ

メディアクエリトークンは、端末の特性(画面解像度やブラウザのビューポート幅など)に応じたスタイルの変更に使います。
主に画面解像度ごとに最適なレイアウトを提供することが目的です。

値の考え方

SmartHRでは管理者・従業員により端末の利用傾向が異なります。特にスマートフォンは端末により最適値の幅が大きいため、おおよその端末をカバーできる値に設定しています。

セマンティックトークン

Breakpoint

ほとんどの場合、この値を使うことはありません。Media Queryに定義されていない、イレギュラーな処理をする場合にのみ使ってください。

トークン名値(px)
SP599px
TABLET959px

Media Query

現状、SmartHRのstyle指定はデスクトップでの利用を基準としており、@mediaの使用はmax-widthを指定することを前提とした値になります。

トークン名
SP(max-width: 599px)
TABLET(max-width: 959px)