鶏口牛後な日々

心の赴くまま、やりたいことを仕事に。

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

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

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

 

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

 

  1. CSS内でかき分ける
  2. CSSをデバイスごとに複数作る

 

まず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ファイルを作り、

 

<link rel="stylesheet" href="small.css" media="screen and (max-width:480px)">

<link rel="stylesheet" href="medium.css" media="screen and (min-width:480px) and (max-width:1024px)">

<link rel="stylesheet" href="wide.css" media="screen and (min-width:1024px)">

 

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

 

 

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