SmartHR Design System

メディアクエリ

メディアクエリトークンは、端末の特性(画面解像度やブラウザのビューポート幅など)に応じて適用スタイルを変更したいときに利用します。主に画面解像度ごとに最適なレイアウトを組むために使用します。

値の考え方

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

セマンティクストークン

Breakpoint

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

トークン名値(px)
SP599px
TABLET959px

Media Query

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

トークン名
SP(max-width: 599px)
TABLET(max-width: 959px)
© 2021, SmartHR, Inc.