Um tempo atrás, eu tive que criar um tabuleiro de damas responsivo a fluidos. Felizmente, tive permissão para usar consultas de mídia. Eu absolutamente amo nth-child()
agora.
https://gist.github.com/3933491
O código:
// Chekkerboard css
#overview
max-width : 1000px
.item
width : 50%
background : white
@media screen and (max-width: 500px)
&:nth-child(4n+2), &:nth-child(4n+3)
background : lightgrey
@media screen and (min-width: 500px) and (max-width: 750px)
#overview
.item
width : 33.33%
&:nth-child(2n)
background : lightgrey
@media screen and (min-width: 750px)
#overview
.item
width : 25%
&:nth-child(8n+2), &:nth-child(8n+4),
&:nth-child(8n+5), &:nth-child(8n+7)
background : lightgrey