メディアクエリの使い方

個人アプリでレスポンシブ対応が必要だったので、その使い方を記事にまとめました。

index.blade.php

<div class = "content">
    @foreach($posts as $post)
      <img src="/storage/{{$post->image}}" class="image" width=293px height=293px>
    @endforeach
  </div>

index.css

@media (max-width: 1420px) {
  .content {
    margin: 90px 218px 0;
  }
 }

 @media (max-width: 1420px) {
  .image {
    width: 280px;
    height: 280px;
  }
 }

 @media (max-width: 1340px) {
  .content {
    margin: 90px 200px 0;
  }
 }

 @media (max-width: 1340px) {
  .image {
    width: 260px;
    height: 260px;
  }
 }

 @media (max-width: 1260px) {
  .content {
    margin: 90px 180px 0;
  }
 }

 @media (max-width: 1260px) {
  .image {
    width: 240px;
    height: 240px;
  }
 }

こんな感じで要素の幅によって中身のサイズを調整してあげる。
検証機能を使えば、幅が簡単にわかるので、それを見ながら調整していけば、
自然にビューのレスポンシブができるようになります！