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而不是top？

Answer 1

添加媒体查询。

class CustomTabBarVC: UITabBarController
{
    override func viewDidLoad()
    {
        super.viewDidLoad()

        self.tabBar.tintColor = AppColor.normalRed
        self.tabBar.barTintColor = .white
        self.tabBar.isTranslucent = true

        if let items = self.tabBar.items
        {
            for item in items
            {
                if let image = item.image
                {
                    item.image = image.withRenderingMode( .alwaysOriginal )
                }
            }
        }
    }
}

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

如您所见，您可以使用不同的条件 - @media screen and (max-width: 480px) { #mylogo { padding-left: 10px; } } @media screen and (min-width: 481px) { #mylogo { padding-left: 0; padding-top: 15px; } }和min-width只有两个。如果您想查看其他可用内容，请查看以下链接：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 2

您可以使用媒体查询。

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

在CSS中你应该写这样的东西：

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

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

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

2 个答案: