Основание для реагирующих строк

Question

У меня есть, возможно, тривиальный вопрос относительно отзывчивого дизайна.

Жидкостная сетка для колонн удивительна. Однако существует ли какая-либо сетка для строк? Например, если я хочу иметь коробку с margin-top на большом экране, но ни на маленьком экране, как бы я это сделал?

Answer 1

вы можете использовать медиа-запрос, например, что вы хотите здесь:

jsFiddle

CSS:

div{ 
    width:100%; 
    height:50px; 
    background:#ddd; 
    margin-top:0px; 
} 
@media (min-width: 500px) { 
    div{ 
    margin-top:100px; 
    } 
} 

с некоторыми transition он будет выглядеть лучше. (DEMO)

Answer 2

Вы ищете что-то, называемое медиа-запросом. Он позволяет указать CSS, но только в том случае, если окно просмотра браузера меньше (или больше) указанного размера. Согласно src, маленький экран запускается с частотой менее 768 пикселей. Таким образом, правило, как тот, который вы просите может выглядеть следующим образом:

<style> 
    @media (max-width: 768px) { 
    .row { 
     margin-top:0 
    } 
    } 
</style>