Nền tảng phong cách khác nhau cho nhỏ - trung bình - lớn

Question

Tôi muốn cung cấp cho CSS khác nhau để H2 khi cha mẹ của ông là lớn - vừa - nhỏ.

Đây HTML của tôi:

  <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> 

Tôi tryed loại lựa chọn:

.category-box.large-6 h2{} 
.category-box.medium-6 h2{} 
.category-box.small-12 h2{} 

Nhưng không hoạt động như tôi muốn.

Answer 1

Bạn nên sử dụng truy vấn phương tiện để đạt được điều này. Hãy xem the foundation media-queries docs để có được cài đặt chính xác để sử dụng. (Hoặc bạn chỉ có thể tìm thấy chúng bên trong 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{} 
}