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

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

您应该使用媒体查询来实现此目的.查看基础媒体查询文档以获取要使用的正确设置.(或者你可以在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{}
}