当他的父母大 – 中 – 小时,我想给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{}
}
