@mediaを使って解像度に応じてデザインを切り替えるコピペで使えるHTML+CSS

CSS規則のひとつ、@mediaを使って解像度に応じてデザインを切り替えます。この実装によって、スマートフォンとパソコンでの段組みやサイドバーの表示非表示の切り替えを実現できます。

JavaScriptを用いないためAMPサイトでも利用できます。

INDEX

解像度に応じた切り替え
使用したCSSについて

解像度に応じた切り替え

解像度に応じて変化します。パソコンをお使いでしたらブラウザの幅を動かして、色が変わることを確認してください。解像度：

注意点：@規則は、その規則内にセレクタを配置する。@media () .box{} ではなく、@media() { .box{} }という書き方をする。

dpi解像度による切替え： @media(min-resolution: 300dpi) とすれば300dpi以上で切替えとなる。

スタイルシートで記述

<div class="att-div">
  <div class="media-box">解像度に応じて変化します。パソコンをお使いでしたらブラウザの幅を動かして、色が変わることを確認してください。<span class="width-span">解像度：</span></div>
</div>

.media-box{
  height:200px;
  padding:10px;
}
.media-box .inbox{
    background-color: #eeeeee;
}
@media (min-width:0px){
  .media-box{
    background-color:#f6bfbc;
  }
  .media-box .width-span::after{
    content:"0～200px";
  }
}
@media (min-width:200px){
  .media-box{
    background-color:#7b6c3e;
  }
  .media-box .width-span::after{
    content:"200～400px";
  }
}
@media (min-width:400px){
  .media-box{
    background-color:#393f4c;
  }
  .media-box .width-span::after{
    content:"400～600px";
  }
}
@media (min-width:600px){
  .media-box{
    background-color:#203744;
  }
  .media-box .width-span::after{
    content:"600～800px";
  }
}
@media (min-width:800px){
  .media-box{
    background-color:#cd5e3c;
  }
  .media-box .width-span::after{
    content:"800～1000px";
  }
}
@media (min-width:1000px){
  .media-box{
    background-color:#e95295;
  }
  .media-box .width-span::after{
    content:"1000～1200px";
  }
}
@media (min-width:1200px){
  .media-box{
    background-color:#b8d200;
  }
  .media-box .width-span::after{
    content:"1200～1400px";
  }
}
@media (min-width:1400px){
  .media-box{
    background-color:#007bbb;
  }
  .media-box .width-span::after{
    content:"1400～1600px";
  }
}
@media (min-width:1600px){
  .media-box{
    background-color:#e60033;
  }
  .media-box .width-span::after{
    content:"1600～1800px";
  }
}
@media (min-width:1800px){
  .media-box{
    background-color:#ffea00;
  }
  .media-box .width-span::after{
    content:"1800～2000px";
  }
}
@media (min-width:2000px){
  .media-box{
    background-color:#884898;
  }
  .media-box .width-span::after{
    content:"2000px～";
  }
}