以前の記事で書いたように、Bootstrap3から4へのバージョンアップに伴い、各種要素のサイズ計算の基準が「px」から「em」へ変更されました。
なじみが無い方に、「32em」と言ってもどのくらいの大きさなのか、イメージがつきにくいため簡単にブレイクポイントを計算できるフォームを作成しました。
Bootstrap4のブレイクポイント計算機
ブレイクポイント
| 接頭クラス名 |
下限 (以上) |
上限 (以下) |
| .col-xs-* |
- |
543 px |
| .col-sm-* |
544 px |
767 px |
| .col-md-* |
768 px |
991 px |
| .col-lg-* |
992 px |
1,199 px |
| .col-xl-* |
1,200 px |
- |
メディアクエリ
/* XS style */
@media screen and (max-width: [[xs-upper]]px) {
}
/* SM style */
@media screen and (min-width: [[sm-lower]]px) and (max-width: [[sm-upper]]px) {
}
/* MD style */
@media screen and (min-width: [[md-lower]]px) and (max-width: [[md-upper]]px) {
}
/* LG style */
@media screen and (min-width: [[lg-lower]]px) and (max-width: [[lg-upper]]px) {
}
/* XL style */
@media screen and (min-width: [[xl-lower]]px) {
}