Как эта структура столбца жидкости меняется на один столбец по мере сужения страницы? - PullRequest
Новая
       24

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

1 голос
/ 08 сентября 2011

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

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

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

Ответы [ 2 ]

3 голосов
/ 08 сентября 2011

Это медиазапросы в нижней части основного CSS : 

/* Smaller screens */

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

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

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

1 голос
/ 08 сентября 2011

@ бен;для этого нужно использовать 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-специфичные для разрешения таблицы стилей /

Проверьте это для более http://webdesignerwall.com/tutorials/css3-media-queries

...