html - 移动视图中左侧和右侧的额外空间

Question

我现在正在重构一个网页，网页的宽度固定为 980px。

看看下面的图片。在移动设备上浏览我的网页时，页面占据了整个屏幕的宽度。

在此处输入图像描述

有没有什么简单的想法可以存档第二张图片中的外观？非常感谢！！

score 0 · Accepted Answer

您可以使用媒体查询来检测屏幕并为其添加额外空间。例如，在 1024 px 宽度的移动屏幕上使用更少的空间，900px 可能：

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

您可以在此处阅读有关媒体查询的更多信息：

1 回答 1