Web Dragon

レスポンシブサイト制作時のブレイクポイント

様々なデバイスサイズがあるので、ブレイクポイントの設定って結構迷いがちなんじゃないかなってことで、「Bootstrap v5.0」に記載されていたブレイクポイントを参考に、CSSでの記述を書いてみました!(自分用のメモとしてw)

▼デモページ
DEMO

Bootstrap v5.0のブレイクポイント

以下の画像はBootstrapのブレイクポイントについて解説してあるページのキャプチャ画像です。
この数値を参考にCSSを書いていきたいと思います!

Bootstrap v5.0のブレイクポイント

▼Breakpoints · Bootstrap v5.0
https://getbootstrap.com/docs/5.0/layout/breakpoints/#available-breakpoints

CSSでの記述

HTMLファイルにstyleタグを使って書いてみました。
ウィンドウの幅に合わせて、現在どのブレイクポイントが該当しているのか分かるようテキストが変化するようになってます。

▼デモページ
DEMO

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>【CSS】ブレイクポイント</title>
</head>
<body>
  <div>
    <p>▼現在のブレイクポイント</p>
  </div>
<style>
p::after{
  display: block;
}
@media only screen and (max-width: 575px) { /* 575px以下 */
  p::after{
    content: '575px以下★@media only screen and (max-width: 575px)';
  }
}
@media only screen and (min-width: 576px) { /* 576px以上 */
  p::after{
    content: '576px以上★@media only screen and (min-width: 576px)';
  }
}
@media only screen and (min-width: 768px) { /* 768px以上 */
  p::after{
    content: '768px以上★@media only screen and (min-width: 768px)';
  }
}
@media only screen and (min-width: 992px) { /* 992px以上 */
  p::after{
    content: '992px以上★@media only screen and (min-width: 992px)';
  }
}
@media only screen and (min-width: 1200px) { /* 1200px以上 */
  p::after{
    content: '1200px以上★@media only screen and (min-width: 1200px)';
  }
}
@media only screen and (min-width: 1400px) { /* 1400px以上 */
  p::after{
    content: '1400px以上★@media only screen and (min-width: 1400px)';
  }
}
</style>

</body>
</html>