基础不同的风格适合中小型大中小型企业

Question

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

但是我没有按照自己的意愿工作。

Answer 1

您应该使用媒体查询来实现此目的。 请查看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{}
}