レスポンシブデザインはメディアクエリーで出来ている

こんにちは。

先日作ったファイルをレスポンシブするためのメディアクエリーの指定方法です。

レスポンシブWebサイトを完成させる為の鍵は

小さな環境で動きを確認しながらコーディングすることです。

構成要素

今回は、文章と画像だけの最小限のWEBページにて試しています。

下図の通りです

index.html / cssフォルダにstyle.css  / imgフォルダにbg と response (2画像）

HTML ソース公開中

ヘッダータグにビューポートをスマホサイズにする為の宣言を記述する

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

CSSソースでそれぞれの3サイズ一つずつ指定

（※ span style font-size: 14pt は不要ですが、プラグインツール利用のため削除が不可です）

@media (min-width: 570px) {
body {
   background: skyblue;
   }
.features p {
    width:45%;
}
.features img {
  width: 50%;
}
.features .item {
  margin-bottom : 60px;
}
.features .item:last-child {
  margin-bottom : 0px;
}
.features .item {
   overflow: hidden;
}
.pull-right {
  float: right;
  padding-left: 5%;
}
.pull-left {
  float: left;
  padding-left: 5%;
 }
 .totop img {
  width: 10%;
  height: auto;
  text-align: right;
  margin-bottom : 20px;
  text-decoration: none;
  }
footer {
  padding: 10px 10px 10px 10px;
  text-align: center;
 }
}

/* スクリーン820px用のための記述 */

@media (min-width: 820px) {
body {
   background: red;
   }
.features p {
    width: 45%;
  }
.features img {
    width: 50%;
  }
.features .item {
    margin-bottom : 60px;
  }
.features .item:last-child {
    margin-bottom : 0px;
  }
.features .item {
    overflow: hidden;
  }
.pull-right {
    float: right;
    padding-left: 10%;
  }
.pull-left {
    float: left;
    padding-left: 10%;
  }
.totop img {
 width: 10%;
 height: auto;
}
 text-align: right;
 margin-bottom : 20px;
 }
 footer {
   padding: 10px 10px 10px 10px;
   text-align: center;
  }
}

/*1024pxの為の記述*/
@media (min-width : 1024px) {
  body {
     font-size : 100%;
     font-family: 'arial';
     background: skyblue !important;
     background-size: cover;
     background-position: 50% 0;
     }
  .features p {
      width: 45%;
    }
  .features img {
      width: 50%;
    }
  .features .item {
      margin-bottom : 60px;
    }
  .features .item:last-child {
      margin-bottom : 0px;
    }
  .features .item {
      overflow: hidden;
    }
  .pull-right {
      float: right;
      padding-left: 10%;
    }
  .pull-left {
      float: left;
      padding-left: 10%;
    }
  .totop img {
   width: 10%;
   text-align: right;
   margin-bottom : 20px;
   max-width: 100%;
   height: auto;
  }
   footer {
     padding: 10px 10px 10px 10px;
     text-align: center;
    }
  }

[themify_button nofollow=”no” link=”https://tipsandtips.xsrv.jp/Responsive/index.html#top”]デモページ[/themify_button]