उत्तरदायी लेआउट कुशलतापूर्वक बनाने के लिए इन युक्तियों का उपयोग करें।
कल्पना कीजिए कि वास्तव में एक अच्छा लेआउट बनाने के लिए आपने पूरी मेहनत की है। लेकिन फिर, जब आप अपनी ब्राउज़र विंडो को थोड़ा छोटा करते हैं, तो आप कुछ ऐसा पाते हैं जो ओवरफ्लो हो रहा है। आप समस्या को ठीक करने के लिए मीडिया क्वेरी में फेंक देते हैं। लेकिन विंडो का आकार बदलने पर, आप देखते हैं कि कुछ और टूट गया है।
यह कुछ ऐसा है जो अधिकांश सीएसएस डेवलपर्स एक बिंदु पर अनुभव करेंगे। लेकिन सौभाग्य से, हमारे पास कई आधुनिक सीएसएस समाधान हैं जो चीजों को विकसित करना और उन्हें अच्छी तरह से काम करना इतना आसान बनाते हैं। यह लेख वेबसाइटों को विकसित करते समय ध्यान में रखने वाली 5 उपयोगी प्रथाओं की पड़ताल करता है। ये युक्तियां आपके डिज़ाइन में परेशान करने वाले ब्रेक से बचने में आपकी सहायता करेंगी।
1. ग्लोबल स्टाइल शीट के साथ शुरुआत करें
CSS लिखते समय हमेशा ग्लोबल स्टाइल से शुरुआत करें। लेआउट के बारे में चिंता मत करो। इसके बजाय, टाइपोग्राफी, रंग और पृष्ठभूमि जैसी सामान्य शैलियाँ सेट करें। मार्जिन रीसेट करें, लिंक्स से अंडरलाइन हटाएं, इत्यादि।
जब आप सामान्य स्टाइलिंग पूरी कर लें, तब आप लेआउट बनाना और लेआउट के भीतर अलग-अलग तत्वों को लक्षित करना शुरू कर सकते हैं। मूल रूप से, ऊपर से शुरू करें और फिर तत्वों पर आगे बढ़ें।
निम्नलिखित सीएसएस उदाहरण सभी तत्वों पर मार्जिन को 0 पर रीसेट करता है, टाइपोग्राफी और सभी प्रमुख शीर्षकों के रंग को परिभाषित करता है, और उन सभी के लिए एक सुसंगत मार्जिन जोड़ता है:
शरीर,
एच 1,
एच 2,
h3,
पी {
अंतर: 0;
}एच 1,
एच 2,
h3 {
रंग: नीला;
फुहारा परिवार: "वरदाना" सान्स सेरिफ़;
फ़ॉन्ट वजन: 900;
ऊंची लाईन: 1;
}
एच 2,
h3,
पी {
मार्जिन नीचे: 1रेम;
}
अब जब आपके पास सभी आधार शैलियाँ परिभाषित हैं, तो आप वहाँ से निर्माण कर सकते हैं। उदाहरण के लिए, आप कंटेनर तत्व में पैडिंग जोड़ सकते हैं। यह सामग्री को आपके ब्राउज़र के किनारों से दूर धकेल देगा। तो आप आवेदन कर सकते हैं अधिकतम चौड़ाई छवियों के लिए, ताकि वे अपने कंटेनर की चौड़ाई के अनुकूल हो सकें। बिंदु विशिष्ट तत्वों को लक्षित करने से पहले सामान्य तत्वों से शुरू करना है।
एक बार फिर, लेआउट उत्तरदायी होगा। इसलिए जैसे ही आप स्क्रीन का आकार बदलते हैं, तत्वों का आकार उसी के अनुसार बदल जाएगा। एक डेवलपर के रूप में, आपको इन CSS टिप्स और ट्रिक्स के बारे में पता होना चाहिए क्योंकि वे आपकी उत्पादकता को अगले स्तर तक ले जा सकते हैं।
2. निश्चित आकार से बचें
जब आप लेआउट के बारे में सोचना शुरू करते हैं, तो सबसे पहले आपको निश्चित आकार से बचना चाहिए। निश्चित आकार जैसे गुणों को संदर्भित करते हैं चौड़ाई: 1000 पीएक्स, ऊंचाई: 200 पीएक्स, और इसी तरह। एक निश्चित ऊँचाई या चौड़ाई निर्धारित करने से आपको केवल लंबी दौड़ में समस्याएँ होंगी।
इसके बजाय, अनुकूल ऊंचाई और चौड़ाई का उपयोग करें। एक तरीका है इस्तेमाल करना मिनट-ऊंचाई और न्यूनतम-चौड़ाई के बजाय ऊंचाई और चौड़ाई. उदाहरण के लिए, मान लीजिए कि आप किसी तत्व की चौड़ाई 600px पर सेट करते हैं। जब आप 600px से छोटे हो जाते हैं, तो सामग्री ओवरफ़्लो हो जाएगी:
इसके बजाय, आपको इससे संपत्ति बदलनी चाहिए चौड़ाई को अधिकतम चौड़ाई. साथ अधिकतम चौड़ाई, तत्व को सिकुड़ने दिया जाएगा क्योंकि ब्राउज़र विंडो संकरी है। और अगर विंडो चौड़ी हो जाती है, तो टेक्स्ट वापस अपनी मूल लंबाई तक विस्तृत हो जाएगा। यहाँ परिणाम है:
इसी के लिए है ऊंचाई. उदाहरण के लिए, मान लीजिए कि आपने सेट किया है ऊंचाई के एक निश्चित मूल्य के लिए एक हेडर का 200 पीएक्स.
हैडर {
ऊंचाई: 200पिक्सल;
दिखाना: जाल;
जगह-आइटम: केंद्र;
}
यह हेडर में सब कुछ पूरी तरह से केंद्रित करता है। लेकिन जब आप ब्राउज़र विंडो को संकीर्ण करते हैं, तो सामग्री अंततः उसके कंटेनर से बाहर निकल जाएगी। और ऐसा इसलिए है क्योंकि आपने शीर्षलेख पर एक निश्चित ऊंचाई निर्धारित की है।
आम तौर पर, ऊंचाई और चौड़ाई दोनों खतरनाक गुण हैं। समाधान अनुकूलन योग्य ऊंचाई और चौड़ाई का उपयोग करना है, अर्थात, मिनट- और अधिकतम ऊँचाई, और मिनट- और अधिकतम चौड़ाई. इन मामलों में, यदि ब्राउजर ऐसी परिस्थितियों में चलता है जहां सामग्री लंबी हो रही है, तो शीर्षलेख उसके अनुकूल होने के लिए बढ़ेगा।
यह एक है सबसे आम CSS गलतियाँ जिनसे आपको बचना चाहिए.
3. याद रखें कि आपकी वेबसाइट डिफ़ॉल्ट रूप से उत्तरदायी है
ध्यान रखें कि CSS कोड की एक भी लाइन लिखने से पहले ही आपकी वेबसाइट रिस्पॉन्सिव हो जाती है। यह मानसिकता आपको डिजाइन प्रक्रिया को जटिल बनाने से बचने में मदद कर सकती है। लेआउट बड़े स्क्रीन और छोटे स्क्रीन पर काम करने वाला है। यह सुंदर नहीं हो सकता है। बड़ी स्क्रीन पर पढ़ना भी मुश्किल हो सकता है। लेकिन वेबसाइट व्यूपोर्ट के आकार के अनुरूप ढल जाती है।
बेशक, छवियां अतिप्रवाहित हो सकती हैं, और पाठ बहुत छोटा हो सकता है। लेकिन आप डिफ़ॉल्ट लेआउट के साथ कुछ खोने वाले नहीं हैं। आपका पाठ टूटेगा नहीं, और सभी तत्व स्क्रीन पर दिखाई देंगे।
जब आप अपना CSS कोड लिख रहे हों तो इस तथ्य को समझना और स्वीकार करना वास्तव में आपकी मदद कर सकता है। जब आप समस्याओं में भाग लेते हैं, तो आप सुनिश्चित होंगे कि त्रुटि आपके द्वारा लिखे गए CSS से उपजी है। इससे समस्या का पता लगाना और उसे ठीक करना आसान हो जाता है।
जटिलता जोड़ने के लिए केवल मीडिया प्रश्नों का उपयोग करने का प्रयास करें। उदाहरण के लिए, जब आप चाहते हैं कि आपके लेआउट में बड़ी स्क्रीन पर तीन कॉलम हों। अन्यथा, उनका प्रयोग न करें। मीडिया प्रश्नों में गहराई से गोता लगाने के लिए, हमारा पढ़ें मीडिया पूछताछ गाइड.
यहाँ एक परिदृश्य है। कल्पना कीजिए कि वर्ग नाम वाला तत्व .विभाजित करना उसके भीतर तीन तत्व हैं। निम्नलिखित सीएसएस के साथ, एक तीन-स्तंभ लेआउट बनाया जाएगा:
।विभाजित करना {
दिखाना: मोड़ना;
फ्लेक्स-दिशा: पंक्ति;
अंतर: 2रेम;
}
छोटी स्क्रीन में (40सेम चौड़ा या कम), आप चाहते हैं कि सब कुछ एक कॉलम में हो। तो आप यह करेंगे:
@मीडिया(अधिकतम चौड़ाई: 40सेम) {
।विभाजित करना {
दिखाना: अवरोध पैदा करना;
}
}
यहां, आप डिफ़ॉल्ट संरेखण (तीन कॉलम) को ओवरराइड कर रहे हैं। लेकिन मीडिया क्वेरी अनावश्यक है क्योंकि ब्राउजर उपयोग करता है प्रदर्शन क्षेत्र डिफ़ॉल्ट रूप से। इसलिए आपको इसे स्पष्ट रूप से परिभाषित करने की आवश्यकता नहीं है।
इसे ध्यान में रखते हुए, आप केवल बड़ी स्क्रीन पर लागू होने वाली एकल मीडिया क्वेरी का उपयोग करने के लिए अपने कोड को रीफैक्टर कर सकते हैं। स्क्रीन 40em से अधिक चौड़ी होने पर आप तीन कॉलम पर स्विच करेंगे:
@मीडिया(अधिकतम चौड़ाई: 40सेम) {
।विभाजित करना {
दिखाना: मोड़ना;
फ्लेक्स-दिशा: पंक्ति;
अंतर: 2रेम;
}
}
छोटी स्क्रीन पर, ब्राउज़र सब कुछ एक कॉलम में रखता है। लेकिन आपको इसे निर्दिष्ट करने की आवश्यकता नहीं है क्योंकि ब्राउज़र इसका उपयोग करता है प्रदर्शन क्षेत्र डिफ़ॉल्ट रूप से। इस प्रकार, आपने जटिलता जोड़ने के लिए केवल मीडिया प्रश्नों का उपयोग किया है।
तो जटिलता जोड़ने और फिर गुणों के एक समूह को ओवरराइड करने के बजाय, अब आप इसकी आवश्यकता होने पर जटिलता जोड़ रहे हैं। ज्यादातर समय, आपको केवल आवश्यकता होगी न्यूनतम-चौड़ाई मीडिया के प्रश्नों। मोबाइल-फर्स्ट से शुरू करें, फिर जब साइट मोबाइल पर अच्छी लगे, तो डेस्कटॉप संस्करण के लिए जटिलता (जैसे कॉलम) जोड़ें।
5. आधुनिक सीएसएस का लाभ उठाएं
आधुनिक सीएसएस दृष्टिकोणों का उपयोग करके, आप अधिकांश संरेखण समस्याओं और विराम बिंदुओं से दूर हो सकते हैं और आंतरिक डिज़ाइन प्राप्त करने की दिशा में आगे बढ़ सकते हैं।
ऐसा करने का एक तरीका यह है:
h1 {फ़ॉन्ट-साइज़: क्लैंप (3rem, 1rem + 10vw, 7rem)}
यह दबा देता है एच 1 न्यूनतम और अधिकतम फ़ॉन्ट आकार के बीच। सबसे छोटा हम चाहते हैं कि वह जाए 3रेम और उच्चतम है 7रेम. मध्य वह है जिसे हम पुनरावृति करेंगे (1रेम + 10 वीडब्ल्यू). परिणामस्वरूप, शीर्षक स्वचालित रूप से सिकुड़ जाएगा क्योंकि व्यूपोर्ट छोटा हो जाता है और बड़ा हो जाता है।
आधुनिक सीएसएस के बारे में और जानें
CSS पिछले कुछ वर्षों में बहुत विकसित हुआ है। आज हमारे पास सीएसएस में पोजिशनिंग तत्वों के लिए नए और बेहतर तरीके हैं। इस लेख में, हमने इनमें से कुछ प्रथाओं को छुआ है और इस बात पर प्रकाश डाला है कि वे सामान्य डिज़ाइन के नुकसान से बचने में आपकी सहायता कैसे कर सकते हैं। आधुनिक सीएसएस सीखने के सर्वोत्तम तरीकों में से एक हैंड्स-ऑन दृष्टिकोण के माध्यम से है, जैसे कि HTML तालिका को डिजाइन करने के लिए आधुनिक सीएसएस का उपयोग करना।