중소기업을위한 재단 스타일이 다릅니다.

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> 

나는 선택의 이런 종류의 tryed :

.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{} 
}