【Bootstrap4】画面サイズによってスタイルを変更する

Bootstrapにより画面レイアウトが変わったら、適用するCSSも変更したい場面があるので、その方法です。

CSS

@media only screen and (max-width: 991px) {
  /* 幅991px以下 */
  body{
    background: #0FF;
  }
}

@media only screen and (max-width: 766px) {
  /* 幅766px以下 */
  body{
    background: #F0F;
  }
}

@media only screen and (max-width: 575px) {
  /* 幅575px以下 */
  body{
    background: #FF0;
  }
}

media only screen … はメディアクエリと言ってCSS3で追加になった記述方法で、デバイスにあった書き分けを行うことができる。
ここでは max-width を指定して、それぞれの画面幅で専用のCSSをオーバーライドしている。

画面幅が1024pxのとき

bootstrap-width-1024.png

画面幅が870pxのとき

bootstrap-width-870.png

画面幅が625pxのとき

bootstrap-width-625.png

画面幅が470pxのとき

bootstrap-width-470.png

この記事へのコメント

スポンサーリンク