Jekyll2.2.0でレスポンシブにしてスマホ対応してみた

Jekyll

変更したのはCSSだけで

css/main.css

@media screen and (max-width: 600px) {
  .post-content img { width: 480px; }
}

@media screen and (max-width: 480px) {
  .post-content img { width: 400px; }
}

@media screen and (max-width: 400px) {
  .post-content img { width: 340px; }
}

@media screen and (max-width: 340px) {
  .post-content img { width: 280px; }
}

というように画面幅に応じて画像の幅を設定してあげればレスポンシブになります.

設定例はこのカルボナーラをどうぞ. ブラウザの幅を変えるとそれにあわせて写真のサイズが変化します.