2012-03-30 2 views
9

Есть ли какая-либо система сетки CSS, которая поддерживает полную ширину видового экрана? Большинство грид-систем, похоже, предназначены только для ширины 960px до 1140px. Это самая развернутая ширина для обычного пользователя (так как большинство людей используют 1280px × 1024px).Есть ли полная ширина поддержки CSS Grid System?

Моя цель - иметь отзывчивый макет для пользователей, использующих даже ПОЛНОЕ разрешение HD (1920px × 1080px).

Если есть лучший/более простой способ сделать это, пожалуйста, дайте мне знать

+1

Это сообщение может помочь (подобный вопрос) http://stackoverflow.com/questions/159025/jquery-grid -recommendations –

+0

Или может не ... Я искал решение на основе CSS. В любом случае, спасибо! –

ответ

9

Twitter bootstrap подвесной системы жидкости работает с процентами: http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem

Существует также много чисто Css системы реагировать сетки, для Exemple: Skeleton

Эта статья охватывает многие из них: http://speckyboy.com/2011/11/17/15-responsive-css-frameworks-worth-considering/

Это можно сделать это самостоятельно, используя проценты по ширине Css , media queries и js fallbacks (поскольку медиа-запросы не поддерживаются полностью).

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

Чтобы ваше решение, вы должны рассмотреть следующие вопросы:

  • Браузер поддержки вам нужно, и те, которые предусмотрены системой сетки.
  • Размер (они легкие для большинства, но некоторые из них - это не только сетка , т. Е. Щебетать бутстрап).
  • Соглашения об именовании, ваши будут использовать странный класс css (например, span4), выбрали тот, который вы предпочитаете, некоторые из них более смысловые, чем другие, это зависит от вас.
  • И мере, открытые источники факторы: общественность, поддержка, обновление частоты ...

Кроме того, этот сайт является наиболее для реагирующих вдохновений: http://mediaqueri.es/

+0

Что вы предпочитаете? –

+3

Я лично влюблен в twitter bootstrap, который обрабатывает множество пользовательских интерфейсов, очень чистый, очень хорошо документированный, легкий и постоянно улучшается ... Я также использую Skeleton для других проектов, нужно слишком много UI вещей. Я думаю, вы можете выбрать кого-нибудь из них и не можете ошибаться, все они делают то же самое, просто позаботьтесь о четырех пунктах выше. –

2

Я работали на жидкостной сетке под названием Fluidable. Вы можете установить максимальную ширину на все, что вам нравится. В вашем случае вы можете просто установить его на 100%, и сетка будет использовать все пространство. Вы также можете настроить любое количество столбцов, которые вы хотите использовать.

https://github.com/andri/Fluidable

+0

Выглядит неплохо! Не работал с меньшим количеством ранее, но кажется легко реализуемым –

0

Для небольших проектов, я бы рекомендовал Amazium. Он обеспечивает 12 столбцов, вложенность, корреляцию и основные запросы к мультимедиа. Для того, чтобы получить полную сетку экрана, разметка должна выглядеть следующим образом:

<div class="row-max"> 
    <div class="grid_12"> 
     ... 
     <div class="row-max"> 
      <div class="grid_6">...</div> 
      <div class="grid_6">...</div> 
     </div> 
    </div> 
</div> 
Смежные вопросы