スマホの大きさ・パソコンの大きさでデザインを変える方法

auです。

Webサイトの作成で、レスポンシブデザインにする場合、Bootstrap4を使っていました。

しかし、それだとBootstrap4にやりたいことがない場合、レスポンシブデザインを実装することが難しいため、普通な？方法を調べてみました。

メディアクエリ

調べてみると、メディアクエリを使えば、端末ごとに設定ができるようです。

<div class="pc-area">
    <p>PCの場合のCSS</p>
</div>

<div class="phone-area">
    <p>スマホの場合のCSS</p>
</div>

>|css|
@media screen and (max-width: 900px) {
    .phone-area {
        display:none;
    }
}

900pxまでの領域なら、phone-areaのcssが適応されます。

この場合、スマホの大きさだと表示されなくなります。

背景の色を変えればよかった・・・。

文字の大きさでわかるように、画面の大きさを狭めると文字が消えます。

このように、画面のサイズによってCSSを変えることができるので、レスポンシブデザインに対応することができます。