レスポンシブ・ウェブ・デザイン、Google Image Search風ギャラリー の授業メモ

yachin29.hatenablog.com

モバイル フレンドリー テスト

CSS 一枚で記述する場合

行の上の記述が影響するので、
影響させない場合は、リセットか、
上書きする指定が必要。

<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">

@media screen and (min-width:641px) and (max-width:959px) {

#container {
  width: 640px;
  margin: 0 auto;
}

  #s-3rd {
    float: none;
    width: 640px;
  }
  
  #s-3rd ul {
    width: 320px;
    float: left;
  }

}


@media screen and (max-width:640px) {

#container {
  width: 320px;
  margin: 0 auto;
}

  section {
    float: none;
  }

}

CSS ファイルを振り分ける場合

• @media ～ は記述しなくて良い
• 他のメディア対応のファイルのリセットをしなくて良い

<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/style-m.css" media="only screen and (min-width:641px) and (max-width:959px)">
<link rel="stylesheet" href="css/style-s.css" media="only screen and (min-width:640px)">
<link rel="stylesheet" href="css/style-l.css" media="only screen and (min-width:960px)">

■ こんな感じになりました。↓
楽しいおかず｜Responsive

Google Image Search 風イメージギャラリー

yachin29.hatenablog.com

■ こんな感じになりました。↓
Google Image search UI

☆