如何仅使用 css 有条件地调整填充？

Question

我正在使用 materialize css，其中我有一个徽标 jpeg，其填充在顶部针对中等和较高屏幕进行了调整。对于移动屏幕，我需要调整左内边距。

对于中等以上，我有这种 css 风格

#mylogo {
    padding-top: 15px;
}

和html

  <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">
    <img src="images/logo.jpeg" id="mylogo"  alt="Logo">
    My Logo
   </a>
</div>

我对小屏幕和小屏幕使用相同的 img 标签。我必须在我的 css 中添加或更改什么才能使 padding-left 而不是顶部对小屏幕和向下屏幕有效？

Answer 1

添加媒体查询。

@media screen and (max-width: 480px) {
    #mylogo {
        padding-left: 10px;
    }
}

@media screen and (min-width: 481px) {
    #mylogo {
        padding-left: 0;
        padding-top: 15px;
    }
}

在最大 480 像素的屏幕上（您可以调整），将向您的图像添加边距。如果设备至少为 481 像素，则图像的左侧填充将重置为 0，而顶部填充将分配为 15 像素。

如您所见，您可以使用不同的条件——min-width 和 max-width 只是两个条件。如果您想查看其他可用的内容，请查看此 link：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 2

您可以为此使用媒体查询。

考虑到 materializecss 使用三种不同的屏幕尺寸（<=600px 用于平板电脑，<=992px 用于台式机，>992px 用于其他所有设备）您必须仅为平板设备提供规则。

在css中你应该这样写：

@media (max-width: 600px) { 
   #mylogo{
      padding-left: 15px;
   }
}

@media (min-width: 601px) { 
   #mylogo{
      padding-top: 15px;
      padding-left:0;
   }
}

如何仅使用 css 有条件地调整填充？

How to conditionally adjust paddings using css only?

html

css

materialize

material-design