【HTML/CSS】レスポンシブ対応の第一歩：メディアクエリの書き方

CSSを知る前は、「レスポンシブ対応」というのはえらく仰々しい作業なんだろうと思っていました。

CSSを勉強して、「CSSをデバイスごとに複数かき分ける」ことなんだ、と知りました。

やり方は、2つあるようです。

まず1つ目。「CSS内でかき分ける」です。

@media screen and (min-width: 1px) and (max-width: 480px) {（ここにCSSを記述）｝

→デバイスの幅が、1px以上、480px以下である場合に、{}内のCSSが適応される。

2018/5/15追記：

sassで書きましたら、上記で動かず。「screen and」をとって下記で動きました。

@media (max-width: 480px) {}

次に2つ目。「CSSをデバイスごとに複数作る」です。

この場合は、デバイスごとにCSSファイルを作り、

注意点としては、大きいほうから小さいほうへ並べて書くか、小さいほうから大きいほうへ並べて書くか、どちらかにしないとだめらしいです。

CSSを勉強した後だと、「なーんだ、そういうことか」と思ったのでした。

鶏口牛後な日々