Схема адаптивной сетки

Я хочу простую в использовании сетку для моего текущего веб-проекта. Это те функции, которые я бы оценил:

  • раскладка флюида: поля, которые могут быть выровнены по горизонтали (бок о бок), каждая из которых имеет одинаковую высоту (например, трехколоночный макет), работая со 100% шириной
  • отзывчивость: автоматически адаптируется при изменении размера окна браузера.
  • мобильные устройства: показывает альтернативный макет размещения для пэдов и мобильных телефонов.
  • размер текста: возможность динамического изменения размеров текста (например, заголовки с полной шириной)
  • размер изображения: возможность динамического изменения размеров изображений (например, галереи изображений полной ширины)
  • точки останова: необязательно определять значения ширины, которые вызывают события, которые изменяют компоновку (например, удаление кнопок, если ширина падает ниже порогового значения)

Update

Я нашел много сеток, но сузил его до следующих трех перспективных фреймворков, которые могли бы хорошо соответствовать моим требованиям:

Вот все остальные:

Обычно я сам тестировал их, прежде чем спрашивать здесь, чтобы я мог сформулировать более конкретные вопросы. Но из-за огромного количества фреймворков я хотел бы услышать некоторые указания, с чего начать.

  • Как ваш опыт с этими или другими подобными структурами?
  • Вы рекомендуете конкретную структуру, которая соответствует моим требованиям?

Решение

Я закончил использование Foundation, что, безусловно, является победителем в этой гонке - по моему скромному мнению.

Обновление 2

Bootstrap 3 - настоящая конкуренция, потому что она также поддерживает семантические классы сетки. И он поддерживает SASS, а также LESS.

Ответы

Ответ 1

Я раньше использовал колонку, и она обеспечивает большую часть функциональных возможностей, которые вы хотите, помимо функции точек останова. Он прост в использовании и адаптивен. На мобильных экранах сетки деградируют в стек, поэтому все содержимое столбцов отображается один под другим. Однако для функции интеллектуальной адаптации, как вы отметили в функции точек останова: я очень рекомендую вам использовать медиа-запросы CSS 3 напрямую, потому что это именно то, для чего они предназначены, и их нетрудно использовать. Рамки CSS, которые предоставляют эти функции под листами, используют только медиа-запросы.

Взглянув на http://twitter.github.com/bootstrap/scaffolding.html#responsive, сетка жидкости Bootstrap предоставляет некоторые удобные сочетания для установки свойств css для определенных размеров экрана, которых нет в столбце.