我希望在我的长式销售页面中添加黑色填充/边距。黑色边距的示例。当我在桌面上查看时在头部输入以下代码时看起来很棒。但是,当我在任何移动设备上查看时,它非常糟糕 - 代码的边距应用于移动版本,因此它看起来被压缩成一个几乎无法辨认的网页。
如何使这些边距显示在桌面视图上,而不影响移动外观?
对此并不那么热衷,并尝试了懒人的方法,将其插入 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 等响应式框架,则默认情况下将烘焙多个媒体查询。