Как эта колонка с текучей средой меняется на одну колонку при сужении страницы?

Question

Может кто-нибудь объяснить, как http://cssgrid.net/ достигает эффекта, когда ширина браузера ниже определенной величины, макет переключается с 3-столбцов на один столбец?

Я попытался отключить JavaScript и проверить CSS .row а также .container но мои знания CSS отсутствуют. Есть min-width свойство, но изменение его через Firebug, похоже, не сильно влияет.

Кто-то может указать, что в CSS вызывает изменение?

Answer 1

@Бен; для этого нужно использовать mediaqueries Это новое свойство, в котором мы определяем CSS в соответствии с шириной. Как это:

<link rel="stylesheet" href="stylesheets/apx.css" type="text/css" media="screen" title="no title" />
<link rel="stylesheet" href="stylesheets/new-css.css" type="text/css" media="screen and (max-width: 600px)" title="no title" />

В приведенном выше примере apx.css ваш CSS по умолчанию и new-css.css применять, когда ширина экрана уменьшается до 600 пикселей.

Это лучшая ссылка для вашего ответа http://css-tricks.com/6206-resolution-specific-stylesheets/

Проверьте это для получения дополнительной http://webdesignerwall.com/tutorials/css3-media-queries

Answer 2

Это медиа-запросы внизу основного CSS:

/* Smaller screens */

@media only screen and (max-width: 1023px) {
    ...
}

@media handheld, only screen and (max-width: 767px) {
    ...
}

Они применяют различные правила, основанные на измерениях браузера, и помогают классом JS для старых браузеров.