メディアクエリ
メディアクエリトークンは、端末の特性(画面解像度やブラウザのビューポート幅など)に応じたスタイルの変更に使います。
主に画面解像度ごとに最適なレイアウトを提供することが目的です。
値の考え方
SmartHRでは管理者・従業員により端末の利用傾向が異なります。特にスマートフォンは端末により最適値の幅が大きいため、おおよその端末をカバーできる値に設定しています。
セマンティックトークン
Breakpoint
ほとんどの場合、この値を使うことはありません。Media Queryに定義されていない、イレギュラーな処理をする場合にのみ使ってください。
トークン名 | 値(px) |
---|---|
SP | 599px |
TABLET | 959px |
Media Query
現状、SmartHRのstyle指定はデスクトップでの利用を基準としており、@media
の使用はmax-width
を指定することを前提とした値になります。
トークン名 | 値 |
---|---|
SP | (max-width: 599px) |
TABLET | (max-width: 959px) |