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

【问题标题】：How to conditionally adjust paddings using css only?如何仅使用 css 有条件地调整填充？
【发布时间】：2017-02-14 12:38:44
【问题描述】：

我正在使用物化 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 而不是 top 对小屏幕和向下屏幕有效？

【问题讨论】：

只需添加padding-left？
不会解决它，因为 padding-left 仅适用于从小到下的屏幕。 padding-top 是中号以上的，所以需要一些条件。

标签： html css material-design materialize

【解决方案1】：

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

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

在 css 中你应该这样写：

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

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

【讨论】：

只是有点错字，它是 mylogo 而不是 myLogo，除此之外它是正确的。

【解决方案2】：

添加媒体查询。

@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 只是两个。如果您想查看还有什么可用的，请查看此链接：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

【讨论】：