Question

我希望在我的长版销售页面上添加黑色填充/边距。 example of black margins。在台式机上查看时，将以下代码输入头部时，效果很好。但是，当我在任何移动设备上浏览时，它的效果都非常糟糕-代码中的边距被应用到了移动设备版本上，因此它看起来像挤进了难以辨认的网页。

如何使这些边距出现在桌面视图上而不影响手机外观？

对这些都不是很热衷，并通过将其插入到html头中来尝试了懒人的方法...这会需要一些CSS编码吗？

谢谢。

<style>
  html { 
      background-color: black;
  }
  body { 
      margin:75px; 
      margin-top:0px; 
      background-color: white; 
  }
</style>

Answer 1

您正在寻找称为 media queries 的内容。这些允许您编写仅针对特定视口的CSS规则，并以@media表示。

如果您希望代码仅适用于台式机，则可以使用somethjing，如下所示：

@media screen and (min-width: 768px) {
  html {
    background-color: black;
  }
  body {
    margin: 75px;
    margin-top: 0px;
    background-color: white;
  }
}

以上内容仅将您的规则应用于768px宽或宽（包括平板电脑，笔记本电脑和台式机）的视口。如果您想进行更精细的媒体查询，可以在 media queries for standard devices 上查看CSSTricks的文章。可以 here 找到相当全面的设备视口大小列表。

请注意，您可以对多个不同的视口使用多个媒体查询，并且如果您使用的是Bootstrap，Skeleton或Toast之类的响应式框架，则默认情况下会引入多个媒体查询。

填充，边距和背景颜色使移动版本未优化？

1 个答案: