हम अपने ब्लॉग पोस्ट मॉड्यूल के साथ खेलना शुरू करते हैं, रिक्ति के साथ घूमते हैं। हम मॉड्यूल के ऊपरी बाएं भाग में थोड़ा रंगीन वर्ग भी जोड़ते हैं, यह उस प्रकार की सामग्री का एक दृश्य हस्ताक्षरकर्ता है।
अगला बदलाव जो हम करते हैं वह है संकीर्ण स्क्रीन आकार में बाहर के कुछ अंतराल को कम करना। चौड़ी स्क्रीन पर, सामग्री 80% चौड़ी (10% चौड़ाई किनारों) है, लेकिन 90% से अधिक छोटे स्क्रीन (5% चौड़ाई किनारों) पर जाना बेहतर लगता है।
हम उस मीडिया क्वेरी के हिट होने पर थोड़े संक्रमण में जोड़ते हैं, जो वास्तव में मज़ेदार डिज़ाइनर-वाई ट्रिक हो सकती है। मुझे इस वीडियो में यह पसंद है, लेकिन अंततः यह डिजाइन से खींच लिया गया। पृष्ठ पर बहुत अधिक सामग्री होने और विचलित होने पर यह तड़का हुआ हो सकता है।
हम अपने ग्रिड सिस्टम को सबसे छोटे आकार में एक विराम बिंदु में बदल देते हैं। यह सुपर आसान है, हम सिर्फ कॉलम को width: 100%;तैरना बंद कर देते हैं और ग्रिड को न उखाड़ फेंकने के लिए उन्हें याय बनाते हैं ! हम रास्ते में कुछ विशिष्टता समस्याओं से जूझते हैं।
हम "असली" मोबाइल डिवाइस पर काम कर रहे ग्रिड की जांच करने के लिए असली आईओएस सिम्युलेटर खोलते हैं। हम उचित मेटा टैग को खोजने के लिए थोड़ा संघर्ष करते हैं, लेकिन अंततः CSS-Tricks.com से सही सही पर जाते हैं। यह काम करता है! लेकिन निश्चित रूप से हमारे पास कुछ पोजिशनिंग मुद्दे हैं जिन्हें हमें काम करने की आवश्यकता होगी रिकॉर्ड के लिए, कि मेटा टैग है:
हम रिक्ति के साथ टिंकर टिंकर टिंकर करते हैं और जब तक चीजें ठीक नहीं दिखती हैं तब तक साइज़िंग करते हैं। चीजें अंत तक बहुत अच्छी तरह से उत्तरदायी दिख रही हैं!