2012-03-30 29 views
9

क्या कोई सीएसएस ग्रिड सिस्टम है जो पूर्ण व्यूपोर्ट चौड़ाई का समर्थन करता है? अधिकांश ग्रिड सिस्टम सिर्फ 960px की चौड़ाई 1140px तक का इरादा रखता है। यह सामान्य उपयोगकर्ता के लिए सबसे अधिक तैनाती चौड़ाई है (क्योंकि अधिकांश लोग 1280px × 1024px का उपयोग कर रहे हैं)।क्या कोई पूर्ण चौड़ाई समर्थन सीएसएस ग्रिड सिस्टम है?

मेरा उद्देश्य उपयोगकर्ताओं के लिए एक पूर्ण एचडी संकल्प (1920px × 1080px) का उपयोग कर उत्तरदायी लेआउट रखना है।

अगर वहाँ एक बेहतर/अधिक सरल इसे बनाने के लिए रास्ता है, कृपया मुझे पता है

+1

इस पोस्ट में मदद कर सकता है (समान प्रश्न) http://stackoverflow.com/questions/159025/jquery-grid: एक पूर्ण स्क्रीन ग्रिड पाने के लिए, अपने मार्कअप की तरह दिखना चाहिए - टिप्पणियां –

+0

या शायद नहीं ... मैं एक सीएसएस आधारित समाधान की तलाश में था। कोई बात नहीं धन्यवाद! –

उत्तर

9

Twitter bootstrap द्रव ग्रिड प्रणाली प्रतिशत के साथ काम करता है: http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem

वहाँ भी शुद्ध सीएसएस उत्तरदायी ग्रिड प्रणाली का एक बहुत है, उदाहरण के लिए: Skeleton

इस लेख उनमें से एक बहुत कुछ शामिल किया गया है: http://speckyboy.com/2011/11/17/15-responsive-css-frameworks-worth-considering/

यह अपने आप को ऐसा करने के लिए, सीएसएस चौड़ाई के लिए प्रतिशत के उपयोग से संभव है , media queries और जेएस फ़ॉलबैक (जैसे मीडिया प्रश्न पूरी तरह से समर्थित नहीं हैं)।

लेकिन उन ग्रिड सिस्टम आपको समय और सिरदर्द बचाएंगे क्योंकि वे सबसे अच्छी तरह से परीक्षण के लिए हैं।

अपने निर्णय में मदद करने के लिए आप पर विचार करना चाहिए:

  • ब्राउज़र समर्थन की जरूरत है और ग्रिड प्रणाली द्वारा प्रदान की गई।
  • आकार (वे अधिकांश के लिए हल्के वजन वाले हैं, लेकिन कुछ न केवल ग्रिड सिस्टम, यानी ट्विटर बूटस्ट्रैप) हैं।
  • नामकरण सम्मेलनों, अपने वाला उपयोग अजीब सीएसएस वर्ग (उदाहरण के span4 के लिए), एक आप चाहें, तो उनमें से कुछ दूसरों की तुलना में अधिक अर्थ हैं चुना हैं, यह आप पर निर्भर है।
  • और कम से कम, ओपन सोर्स किया कारकों: समुदाय, समर्थन, अद्यतन आवृत्तियों ...

इसके अलावा, इस साइट है उत्तरदायी प्रेरणा के लिए एक सबसे: http://mediaqueri.es/

+0

आप क्या पसंद करेंगे? –

+3

मैं व्यक्तिगत रूप से ट्विटर बूटस्ट्रैप से प्यार करता हूं, जो बहुत सी यूआई चीजों को बहुत संभालता है, बहुत साफ, बहुत अच्छी तरह से प्रलेखित, हल्के वजन और बेहतर हो रहा है ... मैं अन्य परियोजनाओं के लिए कंकाल का उपयोग भी कर रहा हूं जब मैं नहीं करता बहुत अधिक यूआई चीजों की जरूरत है। मुझे लगता है कि आप उनमें से किसी को भी चुन सकते हैं और गलत नहीं हो सकते हैं, वे सब एक ही काम करते हैं, बस उपरोक्त चार बिंदुओं पर ध्यान दें। –

2

मैं काम कर रहा हूँ फ्लुइडेबल नामक द्रव ग्रिड सिस्टम पर। आप अधिकतम चौड़ाई को अपनी पसंद के अनुसार सेट कर सकते हैं। आपके मामले में, आप इसे 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> 
संबंधित मुद्दे