2012-03-30 19 views
9

Czy jest jakiś system siatki CSS, który obsługuje pełną szerokość rzutni? Większość Grid System wydaje się po prostu zamiar szerokości 960px do 1140px. Jest to najbardziej rozwinięta szerokość dla zwykłego użytkownika (jak większość ludzi używa 1280 pikseli x 1024 pikseli).Czy istnieje jakiś system CSS o pełnej szerokości wspierający?

Moim celem jest posiadanie elastycznego układu dla użytkowników używających nawet rozdzielczości FULL HD (1920px × 1080px).

Jeśli jest lepiej/bardziej prosty sposób, aby uczynić go, pls daj mi znać

+1

Ten post może pomóc (podobne pytanie) http://stackoverflow.com/questions/159025/jquery-grid -recommendations –

+0

A może nie ... Szukałem rozwiązania opartego na CSS. W każdym razie, dzięki! –

Odpowiedz

9

Twitter bootstrap system sieci płyn współpracuje z procentów: http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem

Istnieje również wiele czystym CSS układu reagują siatki, dla exemple: Skeleton

Ten artykuł obejmuje wiele z nich: http://speckyboy.com/2011/11/17/15-responsive-css-frameworks-worth-considering/

jest możliwe, aby to zrobić samemu, używając procentów dla szerokości css , media queries i js fallbacks (ponieważ zapytania o media nie są w pełni obsługiwane).

Ale te systemy gridowe zaoszczędzą Ci czasu i bólów głowy, tak jak są najlepiej przetestowane.

Aby pomóc w decyzji, należy wziąć pod uwagę:

  • Wsparcie przeglądarka trzeba i te przewidziane przez system siatki.
  • Rozmiar (są one lekkie dla większości, ale niektóre z nich to nie tylko systemy gridowe , np. Twitter bootstrap).
  • Konwencje nazewnictwa, twoje będą użyć dziwnej klasy css (na przykład span4), wybrałeś tę, którą wolisz, niektóre z nich są bardziej semantyczne niż inne, to zależy od ciebie.
  • I w least, otwartych źródeł czynniki: społeczne, wsparcie, aktualizacje częstotliwości ...

Ponadto, ta strona jest dla najbardziej wrażliwych inspiracji: http://mediaqueri.es/

+0

Co byś wolał? –

+3

Jestem osobiście zakochany w twitterze bootstrap, który obsługuje wiele rzeczy związanych z interfejsem użytkownika, bardzo czystych, bardzo dobrze udokumentowanych, lekkich i coraz lepiej ... Używam również szkieletu do innych projektów, gdy nie mam potrzebuję zbyt wiele rzeczy UI. Myślę, że możesz wybrać kogokolwiek z nich i nie może się mylić, wszyscy robią to samo, po prostu zadbaj o cztery punkty powyżej. –

2

pracuję w systemie płynnej sieci o nazwie Fluidable. Możesz ustawić maksymalną szerokość do dowolnie wybranej. W twoim przypadku możesz po prostu ustawić go na 100%, a siatka zużyje całą przestrzeń. Możesz także skonfigurować dowolną liczbę kolumn, których chcesz użyć.

https://github.com/andri/Fluidable

+0

Wygląda ładnie! Nie pracował wcześniej, ale wydaje się łatwy do wdrożenia –

0

Dla małych projektów, polecam Amazium. Zapewnia 12 kolumn, zagnieżdżanie, kompensowanie i podstawowe zapytania o media. W celu uzyskania pełną siatkę ekranu, czy znaczniki powinna wyglądać następująco:

<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> 
Powiązane problemy