当他的父母大 – 中 – 小时,我想给H2不同的CSS.
这是我的HTML:
<div class="category-box large-6 medium-6 small-12 columns"> <h2 class="category-name">My title</h2> <div class="hide-for-small">Everything you need to know about using the framework.</div> </div>
我试过这种选择:
.category-box.large-6 h2{} .category-box.medium-6 h2{} .category-box.small-12 h2{}
但是不按我的意愿工作.
解决方法
您应该使用媒体查询来实现此目的.
请查看 the foundation media-queries docs以获取要使用的正确设置. (或者你可以在CSS中找到它们)
请查看 the foundation media-queries docs以获取要使用的正确设置. (或者你可以在CSS中找到它们)
@media only screen and (max-width: 40em) { /* small */ .category-box h2{/*small h2 style here} } @media only screen and (min-width: 40.063em) { /* medium */ .category-box h2{} } @media only screen and (min-width: 64.063em) { /* large */ .category-box h2{} }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。