Media Queries を取り込みました

もともとは、380px の固定幅のインラインボックス中で記事や記事リストを展開していました。（わたしがインラインボックスを使用した理由は、また後日に。）

そして、その幅について、Media Queries を追加しています。

.fixedInlineBoxWrapper {
    width: 380px ;
}
@media screen and (min-width:1080px) {
  .fixedInlineBoxWrapper {
     width: 650px ;
  }
}
@media screen and (min-width:980px) and (max-width:1079px) {
  .fixedInlineBoxWrapper {
     width: 560px ;
  }
}
@media screen and (min-width:880px) and (max-width:979px) {
  .fixedInlineBoxWrapper {
    width: 470px ;
  }
}
@media screen and (max-width:879px) {
  .fixedInlineBoxWrapper {
    width: 380px ;
  }
}

 

ちょっと無造作に設定してしまったのですが、PC でブラウザの幅を狭めたり広げたりすると変化がわかります。

Android スマートフォンやタブレット、iPad、iPhone の解像度に着目して設定すると、それぞれのデバイスのブラウザに最適な表示が可能となります。「レスポンシブ Web デザイン」あるいは「レスポンシブ・デザイン」と呼ばれる方法に利用されています。

わたしは今回、とてもシンプルに使用しましたが、さらに設定を進めることで、最適化の効果も大きくなると考えられます。