2012-03-30 28 views
9

Tam görünüm genişliğini destekleyen herhangi bir CSS ızgara sistemi var mı? En Grid Sistemi sadece 960px genişliğe kadar 1140 piksele ulaşıyor gibi görünüyor. Bu, normal bir Kullanıcı için en fazla dağıtılan genişliktir (çoğu kişi 1280px × 1024px kullanıyor).CSS Izgara Sistemini destekleyen tam genişlik var mı?

Amacım bile FULL HD Çözünürlük (1920px × 1080px) kullanılarak Kullanıcılar için duyarlı bir düzen sahip olmaktır. bunu yapmak için daha iyi/daha basit yolu varsa

, lütfen bana

+1

Bu mesaj http://stackoverflow.com/questions/159025/jquery-grid (benzer soru) yardımcı olabilir: Bir tam ekran ızgara almak için, İşaretlemenizin gibi görünmelidir -recommendations –

+0

Veya olmayabilir ... CSS tabanlı bir çözüm arıyordum. Neyse, teşekkürler! –

cevap

9

Twitter bootstrap sıvı grid sistemi yüzdeleri ile çalışır bildirmek: http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem

saf css duyarlı ızgara sisteminin bir sürü de vardır, exemple için: Skeleton

Bu makale onlardan bir sürü kapsar: http://speckyboy.com/2011/11/17/15-responsive-css-frameworks-worth-considering/

o css genişliği için yüzde kullanmanın, kendin yapmak mümkün , media queries ve js yedekleri (medya sorguları tam olarak desteklenmediği için).

Ancak bu ızgara sistemleri, en iyi test edilenler için olduğu gibi size ve baş ağrılarına neden olabilir.

sen düşünmelisiniz, kararınızı yardımcı olmak için:

  • tarayıcı ihtiyacınız desteği ve ızgara sistemi tarafından sağlananlar.
  • Boyut (çoğu için hafiftir, ancak bazıları yalnızca sistemlerinde değil, örneğin Twitter önyükleme düzeninde).
  • Adlandırma kuralları, senin o size kalmış, (exemple span4 için) olacak kullanılması garip css sınıfı, bazıları diğerlerinden daha semantik olan tercih biri seçti vardır.
  • Ve en azından açık kaynaklar faktörler: topluluk, destek, güncelleme frekansları ...
  • Ayrıca, bu site

duyarlı ilham için en: Çalışıyordum http://mediaqueri.es/

+0

Ne tercih edersiniz? –

+3

Şahsen çok fazla UI şeyleri işleyen, çok temiz, çok iyi belgelenmiş, hafif ve daha iyi olmaya devam eden twitter bootstrap'e aşığım ... Aynı zamanda diğer projeler için Skeleton kullanmıyorum Çok fazla UI şeylere ihtiyacım var. Sanırım onlardan birini seçebilirsin ve yanlış olamaz, hepsi aynı şeyi yapar, sadece yukarıdaki dört noktaya dikkat et. –

2

Fluidable adlı bir akışkan ızgara sisteminde. Maksimum genişliği istediğiniz gibi ayarlayabilirsiniz. Durumunuzda, bunu% 100'e ayarlayabilirsiniz ve ızgara tüm alanı kullanacaktır. Kullanmak istediğiniz istediğiniz sayıda sütun da yapılandırabilirsiniz. Küçük projeler için

https://github.com/andri/Fluidable

+0

Güzel görünüyor! Daha önce hiç çalışmadı, ama kolay uygulanabilir görünüyor –

0

, ben Amazium öneriyoruz. 12 sütun, yuvalama, ofset ve temel medya sorguları sağlar.

<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>