🧑🏾‍🤝‍🧑🏼 🚕 🤒 शुद्ध सीएसएस 2.0 में ब्लॉक तत्वों की चौड़ाई का स्मार्ट अनुकूलन 👩‍🏫 📹 💇🏿

अगली परियोजना बनाना (या अभी भी केवल मॉक-अप ग्रिड को डिजाइन करना), कई को दुविधा का सामना करना पड़ा - लेआउट की एक निश्चित चौड़ाई या "रबर" ग्रिड का उपयोग करने के लिए, ब्राउज़र विंडो के आकार के अनुकूल।

इन समाधानों में से प्रत्येक के पास अपने पेशेवरों और विपक्ष हैं, मैं minuses पर ध्यान केंद्रित करना चाहता हूं, क्योंकि आमतौर पर यह दो बुराइयों के बीच है कि यह इन निर्णयों के minuses को प्रतिबिंबित करने में है जिसे किसी को चुनना है।

ब्रेडबोर्ड मेष की निश्चित चौड़ाई

लेआउट 960-980 पिक्सल के क्षैतिज आयाम में संचालित होता है (ताकि अधिकांश रिज़ॉल्यूशन के अधिकांश उपकरणों पर सब कुछ फिट बैठता है), जो खिड़की के बड़े क्षैतिज आयामों के साथ किसी तरह से मिर्ची लगती है - उपयोगी पृष्ठ सामग्री की एक पतली ऊर्ध्वाधर पट्टी और पक्षों पर अप्रयुक्त स्थान के विशाल बेकार क्षेत्र।

"रबर" ब्रेडबोर्ड ग्रिड खिड़की की चौड़ाई

फिर, बड़े क्षैतिज खिड़की के आकार के साथ, एक और समस्या है: पाठ की रेखाएं बहुत लंबी हो जाती हैं, और उन्हें पढ़ना हमारे लिए उतना आरामदायक नहीं होता जितना हम चाहते हैं।
इस समाधान के साथ एक और आम समस्या यह है कि बड़े क्षैतिज विंडो आकारों के लिए साइड मार्जिन तत्वों के क्षैतिज आयामों के साथ इतनी अच्छी तरह से संगत नहीं हैं, जो लेआउट को देखते हुए भी आराम नहीं जोड़ते हैं।

मैं एक सरल समाधान प्रदान करना चाहता हूं - पिक्सेल में न्यूनतम क्षैतिज आकार को एक निश्चित मूल्य तक सीमित करना, और खिड़की की चौड़ाई के प्रतिशत के रूप में अधिकतम सापेक्ष बनाना। यह सीएसएस विनिर्देश के एक और 2 संस्करणों के साथ सरल साधनों द्वारा बहुत आम है।

अपडेट: मैं एक आरक्षण करना चाहता हूं कि हम क्लासिक रबर प्रभाव के बारे में बात नहीं कर रहे हैं और बिल्कुल सभी प्रस्तावों को अपनाने के बारे में, बल्कि उन संकल्पों की एक उचित श्रेणी के बारे में जिनके लिए लेआउट डिज़ाइन किया गया है। नीचे दिए गए उदाहरणों में, यह एक क्लासिक डेस्कटॉप रिज़ॉल्यूशन रेंज है जिसमें 1024 पिक्सेल या उससे अधिक का क्षैतिज रिज़ॉल्यूशन है।

एक बार फिर, मैं जोर देता हूं: पोस्ट में हम सभी प्रकार के उपकरणों और सभी रिज़ॉल्यूशन रेंज के समाधान के बारे में बात नहीं कर रहे हैं। एक लेआउट के ढांचे के भीतर, यह समस्या सिद्धांत रूप में हल नहीं होती है, इसे एक तरह से या किसी अन्य तरीके से हल करने के लिए, कई लेआउट की आवश्यकता होगी। अलग से मक्खियों, अलग से कटलेट।

एक लेआउट कंटेनर बनाएँ:

<html> <head> ... </head> <body> <div class="page-container"> ... </div> </body> </html>

हम इसे एक साधारण शैली कोड के साथ जारी करते हैं:

 div.page-container { min-width: 960px; max-width: 75%; margin: 0 auto; padding: 0; }

हालांकि, यह समाधान किसी को इस तथ्य के कारण पर्याप्त नहीं लग सकता है कि बहुत बड़े क्षैतिज खिड़की के आकार के साथ, लाइन की लंबाई के साथ समस्याएं फिर से दिखाई देंगी। यह एक समान रूप से सरल अतिरिक्त चाल द्वारा हल किया गया है: पहले से ही वर्णित एक के अंदर एक अतिरिक्त बाहरी कंटेनर बनाना और इसकी अधिकतम चौड़ाई को एक निश्चित मूल्य तक सीमित करना (यह विषयवस्तु मुझे ऐसा लगता है कि 1400-1600 पिक्सल की सीमा में मूल्य सर्वोत्तम अनुकूल हैं)। फिर से हम केवल CSS 2.0 टूल्स का उपयोग करते हैं। इस तरह का एक समाधान, पहली टिप्पणी में प्रस्तावित मूल कंटेनर के लिए सिर्फ एक प्रतिशत चौड़ाई जोड़ने के बजाय, IE में भी काम करेगा, जो संस्करण 9 तक मूल्यों के युगपत विनिर्देश को नहीं समझता है।

हम HTML के पूरक हैं:

 <html> <head> ... </head> <body> <div class="page-container"> <div class="page-container-inner"> ... </div> </div> </body> </html>

और CSS को थोडा बदलें:

 div.page-container { max-width: 75%; min-width: 960px; margin: 0 auto; padding: 0; } div.page-container-inner { min-width: 960px; max-width: 1600px; margin: 0 auto; padding: 0; }

जैसा कि आप देख सकते हैं, समाधान बेहद सरल और सार्वभौमिक है, इसे किसी भी ब्लॉक तत्वों पर लागू किया जा सकता है।

शुद्ध सीएसएस 2.0 में ब्लॉक तत्वों की चौड़ाई का स्मार्ट अनुकूलन

ब्रेडबोर्ड मेष की निश्चित चौड़ाई

"रबर" ब्रेडबोर्ड ग्रिड खिड़की की चौड़ाई

More articles: