html - モバイル ビューの左側と右側の余分なスペース

Question

現在、Web ページをリファクタリングしています。Web ページの幅は 980px に固定されています。

下の画像を見てください。モバイル デバイスで Web を閲覧しているときに、ページが画面の幅いっぱいに表示されました。

2 番目の写真の外観をアーカイブするための簡単なアイデアはありますか? どうもありがとう！！

Answer 1

メディア クエリを使用して画面を検出し、その領域を追加できます。たとえば、幅が 1024 ピクセルのモバイル画面では、使用するスペースが少なくて済みます。おそらく 900 ピクセルです。

  @media (max-width: 1024px) {
    .container{
        width: 900px;
    }
  }

メディア クエリの詳細については、次を参照してください。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries