SORU
20 Mart 2012, Salı


Veya sabit ızgara sistemi ve duyarlı tasarım sıvı, Twitter Bootstrap dayalı

Birlikte gidiyorlar nasıl twitter bootstrap grid ve çeşitli seçenekler hakkında kafam karıştı.

Öncelikle, sıradan bir sabit* *0 veya container-fluid sahip olabilirsiniz.

Bir ya da bir sıradan row veya sıvı bir satır, row-fluid vardır. O, akıcı bir satır, veya konteyner-sıvı ile sabit bir konteyner... sabit bir satır ile olabilir?

Sonra da bunun üzerine, 'duyarlı' medya sorguları, veya değil. ekleyebilirsiniz

Bunlar nasıl bir etkileşim olarak kafam karıştı. Ama en açık örneği ile başlayalım.

the examples page kendini, fixed grid fluid grid bir de örnek olarak sunulan şey var

Ancak, bu örnek benim tarayıcıda, sayfa iki ızgaraları aynı şekilde davranır kendisi. Örnek sayfa isteğe bağlı duyarlı medya sorguları kullanır çünkü belki de?her ikisi deızgara örnekler, ben yavaş yavaş benim tarayıcı penceresinde daralma başlarsa, ızgara elemanlarıdeğilyavaş yavaş daha dar belli (duyarlı) sınır genişliği ulaşıldığında, daha fazla sınır genişlikleri daha küçük bir boyuta ve tekrar oturtun. Ama her ikisi de sıradan '' örnek 'sıvı' örnek aynen burada afedersiniz fark nedir? davranmasına sabit

CEVAP
27 Mart 2012, Salı


Sabit genişlik ve sıvı genişliği arasında karar verirken TÜM sayfa açısından düşünmek gerekir. Genel olarak, bir veya diğer, ancak her ikisini de almak istiyorum. Bu örnekler, eğer söz konusu listede, aslında, sabit genişlikli aynı sayfa. Diğer bir deyişle, İskele sayfa sabit genişlikli düzeni kullanıyor. İskele sayfada fixed grid fluid grid örnekler, daha ziyade sabit ve akışkan genişlik düzenleri uygulama belgelerine olmak demek değildir.

Uygun sabit genişlikli örneği here. Uygun sıvı genişliği örnek here.

Sabit genişlik örnek gözlemleyerek, içerik tarayıcınızın 960px geniş daha büyük ve boyutları değişen görmelisiniz. Bu sayfanın (sabit) maksimum genişliği. Sabit genişlikli bir tasarım medya sorguları belirli stilleri için asgari genişlikleri tayin eder. Tarayıcı pencerenizin küçültmek ve düzeni farklı bir boyuta snap görünce eylem bu göreceksiniz.

Tersine, sıvı genişlikli düzeniher zamantarayıcı penceresine sığdırmak için streç, ne kadar soğuk olursa olsun. Medya sorguları stilleri değiştirmek gösteriyor, ama konteyner genişliği her zaman tarayıcı penceresi (piksel sabit bir sayı yerine bir yüzdesi vardır.

'Duyarlı' medya sorguları gitmeye hazırlar. Sadece eğer sayfanız için sabit genişlik veya sıvı genişliği bir düzen kullanmak istiyorsanız karar vermeniz gerekir.

Satır oluştururken, emin sabit genişlik düzeni row kullanma ve sıvı genişliği row-fluid. Değil mix ve MAÇ çok iyi bir sebebi yoksa).

EDİT: Yorum, biraz başı olarakjsFiddlesiçin:

Bu kemanlar tamamen Bootstrap-ücretsiz, herkes Twitter Bootstrap kullanmadan benzer bir çözüm zanaat için istekli onlar için iyi bir başlangıç noktası yapar saf CSS medya sorguları dayanır.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • GirlSanctuaryBlog

    GirlSanctuar

    28 Aralık 2011
  • Justin Davis

    Justin Davis

    14 Ocak 2008
  • Music EuroDance 2

    Music EuroDa

    12 Mayıs 2011