css-logo

以前に僕のブログを見たことがある人にはわかると思いますが、サムネイル画像がなかったり、文字のサイズ、余白などが違ったりとデザインをガラッと変えました！ デザインについて考えると、どんどん深みにはまって正解がまったくわからなかったです。（笑）

CSSで@mediaを使ってデバイスの大きさごとに表示を調整したので、その記事を書きます。

@mediaとは

@mediaを使うことで、各デバイスや画面サイズごとに適用するCSSを指定できます。 レスポンシブにする場合は必須みたいです。（CSSは本当によくわからない。。）

使い方

以下のような感じで使うことができます。

@media (max-width: 767px){
    img {
        width: 100%;
        height: auto;
    }
}
@media (min-width: 768px){
    img {
        width: 277px;
        height: 145px;
    }
}

(max-width: 767px)はデバイスの画面幅が767px以下だったら、{}のCSSを適用します。 (min-width: 768px)はデバイスの画面幅が768px以上だったら、{}のCSSを適用します。 これは例としてあげていて、レスポンシブ対応させるときは画像サイズを%やautoを使って指定することでいい感じにできます。

767pxを画面幅の境目にしている理由として、今のパソコンやスマホ、タブレットのサイズを考えると、767pxのサイズに合わせる見やすくできるそうです。

@media screen and (max-width: 767px)のような書き方をしているサイトが多数ありますが、screenとはスクリーン画面ではなく、プリンターまたは音声機器以外のデバイスすべてなので、わざわざscreenをつける必要はないです。

まとめ

レスポンシブ対応させるときは@mediaを使って、デバイス毎にCSSを変更させましょう。