html - 移动版本未优化的填充、边距和背景颜色？

Question

我想在我的长篇销售页面中添加黑色填充/边距。 example of black margins . 当我在桌面上查看时在头部输入以下代码时看起来很棒。 然而，当我在任何移动设备上查看时，它都非常糟糕 - 代码的边距应用于移动版本，因此它看起来被揉成一个几乎无法辨认的网页。

如何让这些边距出现在桌面 View 上而不影响移动设备的外观？

不太热衷于此，并通过将其插入 html head 来尝试懒人的方法...这需要一些 CSS 编码吗？

谢谢。

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

Answer 1

您正在寻找所谓的 media queries 。这些允许您编写仅针对特定视口(viewport)的 CSS 规则，并用 @media 表示。 .

如果你想让你的代码只适用于桌面，你可以使用类似下面的东西:

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

以上只会将您的规则应用于 768px 的视口(viewport)wide 或 wide(包括平板电脑、笔记本电脑和台式机)。如果您想要更精细调整的媒体查询，您可以查看 CSSTricks 在 media queries for standard devices 上的文章。可以找到相当全面的设备视口(viewport)大小列表 here .

请注意，您可以对多个不同的视口(viewport)使用多个媒体查询，如果您使用的是 Bootstrap、Skeleton 或 Toast 等响应式框架，则默认情况下会内置多个媒体查询。