如何解决有没有办法仅在 bulma css 框架中更改移动设备的填充值?
所以我使用 Bulma css 框架建立了一个网站。我将每个元素的 padding-left 和 padding-right 设置为 10%。在移动设备上,填充需要更小。也许 5% 或更少没关系。但我不知道如何仅为移动设备更改填充。我没有在他们的文档中找到帮助。有人可以帮忙吗?例如:
nav{
padding-left: 10%;
padding-right: 10%;
}
我想成为的:(但仅限于移动设备)
nav{
padding-left: 5%;
padding-right: 5%;
}
解决方法
您可以在 css 中使用媒体查询为特定设备分配类。请参考this
移动设备示例:
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.mobile-device {
//styles for mobile
}
}
,
Bulma 有 visibily helpers 可根据所使用的设备(移动设备、平板电脑、桌面设备、宽屏和全高清)显示或隐藏元素。
您可以将 is-hidden-tablet
类应用到 HTML 中的 nav
并在 CSS 中像这样使用它:
nav.is-hidden-tablet{
padding-left: 5%;
padding-right: 5%;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。