在bulma css框架中，有没有办法改变移动端的PADD值？

Question

所以我用Bulma css框架搭建了一个网站。我将每个元素的左填充和右填充设置为10%。在移动设备上，填充需要更小。也许5%或更少都无关紧要。但我不知道如何仅为移动设备更改填充。我在他们的文档中找不到帮助。有人能帮帮忙吗？例如：

nav{    
    padding-left: 10%;
    padding-right: 10%;
}

我想成为的人：(但仅限于移动设备)

nav{    
    padding-left: 5%;
    padding-right: 5%;
}

Answer 1

您可以在css中使用媒体查询为特定设备分配类。请参考this

移动设备示例：

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .mobile-device {
        //styles for mobile
    }
}

Answer 2

根据使用的设备(移动设备、平板电脑、台式机、宽屏和fullHD)，Bulma具有显示或隐藏元素的visibily helpers。

您可以在HTML中将is-hidden-tablet类应用于nav，并在您的CSS中像这样使用它：

nav.is-hidden-tablet{    
    padding-left: 5%;
    padding-right: 5%;
}

若要使导航菜单仅在具有自定义填充的移动设备上显示，请执行以下操作。

​