css - 智能手机的额外空间

Question

我网站的主题是 Drupal 响应式主题(重新加载图片)，宽度设置为 960px，最大宽度为 1140px，宽度为 90%。

在 PC 上，该网站在所有浏览器上看起来都很好。在 SP，左边有额外的空间。我不知道如何检查原因并修复它。请帮助我了解出了什么问题。谢谢。

Answer 1

您必须在随模板提供的 css 文件中编辑 media-queries。要为具有 max-width:960px; 的屏幕向主体添加额外的 20px 填充，我建议将以下内容添加到您的代码中:

@media only screen and (max-width: 960px) {
   body {
     padding-left:20px;
     padding-right:20px;
   }
}

您当然可以通过更改第一行来修改该样式表，例如要为宽度在 500 到 960 像素之间的屏幕制作 40 像素的填充，您可以这样写:

@media only screen and (min-width:500px) and (max-width: 960px)

如果您不想使用媒体查询，您可以通过添加以下内容直接将填充应用到正文:

body {
    padding-left:20px;
    padding-right:20px;
}

这将为每个屏幕(甚至比 960 像素更宽)添加填充，但最终结果是相同的。

因此，请选择您觉得更舒服的选项。第一个给你更多的灵 active ，但它更复杂。第二种更简单，更容易实现。