Есть ли полная ширина поддержки CSS Grid System? - PullRequest
Новая
       32

Есть ли полная ширина поддержки CSS Grid System?

9 голосов
/ 30 марта 2012

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

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

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

Ответы [ 3 ]

9 голосов
/ 30 марта 2012

Начальная загрузка Twitter Система жидкой сетки работает с процентами: http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem

Существует также много чистой системы реагирования на CSS, например: Skeleton

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

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

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

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

  • Необходимая поддержка браузера и поддержка, предоставляемая системой сетки.
  • Размер (для большинства они легковесны, но некоторые являются не только сеточными системами, то есть загрузчиком Twitter).
  • Соглашения об именах, вы собираетесь использовать странный класс CSS (например, span4), выберите тот, который вы предпочитаете, некоторые из них более семантические, чем другие, решать вам.
  • И, по крайней мере, факторы открытых источников: сообщество, поддержка, частоты обновлений ...

Кроме того, этот сайт наиболее подходит для отзывчивых идей: http://mediaqueri.es/

2 голосов
/ 30 марта 2012

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

https://github.com/andri/Fluidable

0 голосов
/ 21 сентября 2015

Для небольших проектов я бы порекомендовал Амазиум . Он предоставляет 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>
...