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



我希望在我的长式销售页面中添加黑色填充/边距。黑色边距的示例。当我在桌面上查看时在头部输入以下代码时看起来很棒。但是,当我在任何移动设备上查看时,它非常糟糕 - 代码的边距应用于移动版本,因此它看起来被压缩成一个几乎无法辨认的网页。

如何使这些边距显示在桌面视图上,而不影响移动外观?

对此并不那么热衷,并尝试了懒人的方法,将其插入 html 头中......这需要一些CSS编码吗?

谢谢。

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

您正在寻找所谓的媒体查询。这些允许您编写仅针对特定视口的 CSS 规则,并用 @media 表示。

如果您希望您的代码仅适用于桌面,则可以使用如下所示的 somethjing:

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

上述规则仅将您的规则应用于768px宽或宽的视口(包括平板电脑、笔记本电脑和台式机(。如果你想要一个更精细的媒体查询,你可以查看CSSTricks关于标准设备的媒体查询的文章。可以在此处找到相当全面的设备视口大小列表。

请注意,您可以对多个不同的视口使用多个媒体查询,如果您使用的是 Bootstrap、Skeleton 或 Toast 等响应式框架,则默认情况下将烘焙多个媒体查询。

相关内容

  • 没有找到相关文章

最新更新