मीडिया प्रश्नों की न्यूनतम संख्या या रिवर्स अनुकूलनशीलता की विधि के साथ अधिकतम अनुकूलनशीलता

" हर समस्या का हमेशा समाधान होता है - सरल, सुविधाजनक और निश्चित रूप से गलत ।" - हेनरी लुई मेनकेन।

समस्या का सार

पहली नज़र में, अनुकूली लेआउट का कार्यान्वयन युद्धाभ्यास के लिए एक छोटे से क्षेत्र के साथ "रैखिक खोज" की तरह लग सकता है।

हम आवश्यक कक्षाएं असाइन करते हैं, आवश्यकतानुसार तत्वों के आकार, स्थिति या क्रम को बदलते हैं, और मामला ऐसा लगता है।

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

जब असामान्य डिज़ाइन समाधानों का सामना किया जाता है, तो मीडिया क्वेरीज़ "मोटा" हो जाता है, गैर-मानक ब्रेकप्वाइंट दिखाई देते हैं, और डिज़ाइन विवरण बदलते समय, लेआउट में बदलाव करना काफी कठिन काम हो जाता है।

ग्राहक या डिजाइनर से कोई भी सुधार, और सभी मीडिया प्रश्नों में सीएसएस कोड को संपादित किया जाना चाहिए (विशेषकर यदि यह किसी और का सीएसएस है और वे एक अतार्किक अनुक्रम के साथ विभिन्न स्थानों में पूरे कोड में बिखरे हुए हैं)।

जो अक्सर एक ऐसी स्थिति की ओर ले जाता है जहां आप अब स्थिति पर पूर्ण नियंत्रण नहीं रखते हैं और "कठिन" तरीकों का सहारा लेने का प्रलोभन है, जैसे कि महत्वपूर्ण निर्देश, या घोंसले का शिकार। कोड और भी कम अनुकूलन योग्य हो जाता है और कहीं-कहीं हजारों लाइनों में से ऐसी लाइनें दिखाई देती हैं जिनकी अब आवश्यकता नहीं है और केवल (थोड़ा सा) ब्राउज़र को धीमा कर देता है।

निर्णय

भाग 1. पूर्ण सापेक्षता

इस लेख का मुख्य और सबसे महत्वपूर्ण विचार यह है कि हम जितना कम सीएसएस कोड लिखते हैं, उसे नियंत्रित करना उतना ही आसान होता है।

रिवर्स अनुकूलनशीलता की विधि का सार प्रत्येक तत्व को यथासंभव अनुकूल बनाना है, और फिर धीरे-धीरे स्क्रीन के आकार के अनुकूल होने की क्षमता को कम करना है।

तो इस दिशा में मुख्य कदम माप की निरपेक्ष इकाइयों का उपयोग है: px, em, rem केवल मीडिया क्वेरीज़ के अंदर (दुर्लभ अपवादों के साथ)।

मीडिया के प्रश्नों के बाहर, हम केवल सापेक्ष व्यूपोर्ट माप इकाइयों का बेहतर उपयोग करते हैं: vw, vh, vmax और प्रतिशत%।

हम व्यूपोर्ट इकाइयों में ब्लॉक और टेक्स्ट के रूट टैग को मापेंगे, जबकि बच्चे के लिए, माता-पिता के प्रतिशत के रूप में आकार पर विचार करना अधिक सुविधाजनक है।

यह तर्कसंगत लगता है - तत्वों को प्रत्येक ब्रेकपॉइंट के लिए सेटिंग्स को ओवरराइट किए बिना, स्वतंत्र रूप से स्क्रीन आकार के अनुकूल होने की अनुमति देता है।

हर बार, परियोजना के आकार की परवाह किए बिना, तैयारी के साथ काम शुरू करना चाहिए।
पहली चीज जो हम करेंगे, वह है हमारे नमूना लेआउट को मापना और सभी आयामों को लिखना जो हमें चाहिए।



1920 हमारे लेआउट की मुख्य चौड़ाई है, अन्य सभी क्षैतिज आयाम इस पर निर्भर करेंगे।
930 हमारे लेआउट की मुख्य ऊंचाई है (स्क्रीन पर एक ही समय में दिखाई देने वाले पृष्ठ क्षेत्र की अनुमानित ऊंचाई), सभी ऊर्ध्वाधर आकार इस पर निर्भर करेंगे।
1400 कंटेनर की चौड़ाई है जिसमें पेज की पूरी सामग्री को पैक किया जाएगा।
अगला, हम कंटेनर और पाठ के लिए मुख्य कक्षाएं बनाते हैं, जो निम्नानुसार हैं:
(लेआउट की अनुमत चौड़ाई / चौड़ाई) * 100, अर्थात्। हमारे मामले में
(1400/1920) * 100 = 72.9
परिणाम, जैसा कि ऊपर योजनाबद्ध है, व्यूपोर्ट इकाइयों में लिखा गया है, अर्थात्, चौड़ाई देखें:

.container { width: 72.91vw; } 

हम पाठ के लिए ऐसा ही करेंगे, इस अपवाद के साथ कि vw के बजाय हम vmax का उपयोग करते हैं - अधिकतम स्क्रीन आकार और चौड़ाई का उपयोग करने के लिए।
(55/1920) * 100 = 2.86

 .page__title { font-size: 2.86vmax; } 

इसके अलावा, ऐसे तत्वों के लिए जिनकी ऊंचाई और चौड़ाई (वर्ग और गोल तत्व) समान है, आपको अनुपात बनाए रखने के लिए vmax इकाइयों का उपयोग करने की भी आवश्यकता है। अगला, आप ग्रिड को टाइप और स्केच करना शुरू कर सकते हैं।

जिन ब्लॉकों को ऊंचाई निर्धारित करने की आवश्यकता है, हम व्यूपोर्ट में उसी पुनर्गणना सूत्र का उपयोग करते हैं, लेकिन अब चौड़ाई के बजाय हम स्क्रीन की ऊंचाई से शुरू करेंगे और परिणाम में vh (दृश्य ऊंचाई) जोड़ेंगे। इसके अलावा, हम ऊपरी और निचले इंडेंट पर vh लागू करेंगे।
(300/1920) * 100 = 15.62;
(60/1920) * 100 = 3.12;

 .main__block { width: 15.62vmax; height: 15.62vmax; margin-top: 3.12vh; margin-right: 3.12vw; } 

और नेस्टेड ब्लॉकों की चौड़ाई, जैसा कि मैंने पहले कहा था, हम फ्लेक्स-बेस का उपयोग करके प्रतिशत के रूप में गणना करेंगे।



(970/1920) * 100 = 50.52;
(16/1920) * 100 = 0.83;

 .main-menu { width: 50.52vw; } .main-menu__item { flex-basis: calc(100% / 4 - 0.83vw); } 

भाग 2. रिवर्स अनुकूलनशीलता

ब्लॉक यथासंभव अनुकूल व्यवहार करते हैं, लेकिन वे अत्यधिक अनुकूल हैं:
पाठ छोटे स्क्रीन पर अपठनीय हो जाता है, और ब्लॉक किसी भी स्क्रीन पर अनन्तता के लिए तैयार करने के लिए तैयार होते हैं।

अब पिछड़े अनुकूलन का समय है।

मीडिया के प्रश्नों का उपयोग करते हुए, हम सापेक्ष इकाइयों को निरपेक्ष के साथ प्रतिस्थापित करते हैं।
फ़ॉन्ट आकार के लिए;
ब्लॉक ऊंचाई के लिए पीएक्स;

कंटेनर और कुछ ब्लॉकों की चौड़ाई के लिए, हम सापेक्ष इकाइयों का उपयोग करना जारी रखेंगे, लेकिन उन्हें% में बदल देंगे:

 @media (max-width: 767px) { .page__title { font-size: 4em; } .main__block { width: 300px; height: 300px; } .some__block { width: 100%; height: 300px; } .... } 

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

भाग 3. सुविधा और प्रोग्रामिंग की एक चुटकी

इस पद्धति की चंचलता के बावजूद, हम बहुत से कार्य "पर्दे के पीछे" करते हैं, अर्थात्, पिक्सेल को व्यूपोर्ट इकाइयों में मैन्युअल रूप से अनुवाद करने के लिए कैलकुलेटर का उपयोग करने के लिए। इस प्रक्रिया को स्वचालित करने के लिए, हमें Scss का उपयोग करते हुए कुछ सरल चरणों का पालन करने की आवश्यकता है:

1. चर के मुख्य आयाम लिखें

 $full-width: 1920; $work-width: 80; $screen-height: 720; 

2. व्यूपोर्ट में पिक्सेल को स्वचालित रूप से पुनर्गणना करने के लिए एक फ़ंक्शन लिखें

 @function vmax($pixels, $context: $full-width) { @return #{($pixels/$context)* 100}vmax } 

और vw और vh के लिए दो समान।

अब हम सुरक्षित रूप से सभी आकारों को उस रूप में लिख सकते हैं जिसमें उन्हें उदाहरण लेआउट में इंगित किया गया है और इस "मैन्युअल रूप से" पर विचार न करें:

 .main__block { width: vmax(300); height: vmax(300); margin-top: vh(60); margin-right: vw(60); } 

इस प्रकार, हम समय और प्रयास बचाते हैं।

मीडिया प्रश्नों में ऊपर, हमने फ़ॉन्ट आकार को इंगित करने के लिए em इकाइयों का उपयोग किया,
इसलिए, उनके लिए एक फ़ंक्शन लिखना अच्छा होगा, स्पष्टता और व्यवस्था का निरीक्षण करने के लिए:

 $browser-context: 16; @function em($pixels, $context: $browser-context) { @return #{$pixels/$context}em } 

मुझे लगता है कि यह स्पष्ट है कि इन कार्यों को एक बार लिखा जाएगा और फिर वे बनाए गए चर के साथ-साथ एक श्रेणी से दूसरी परियोजना में "स्थानांतरित" कर सकते हैं, साथ ही उनके आधार पर कुछ कक्षाएं भी कर सकते हैं।

नई परियोजना पर काम शुरू करते समय आपको केवल यही करना होगा कि लेआउट से "माप लेना" और इन चरों में मूल्यों को प्रतिस्थापित करना है।

निष्कर्ष

• हमें अलग-अलग छोरों और फाइलों पर बिखरे हुए अनावश्यक कोड मिलते हैं।
• हम इस पर अपना नियंत्रण बढ़ाते हैं।
• हम कोड लिखने और संपादन की प्रक्रिया को गति देते हैं।
• अपने जीवन को सरल बनाएं, जैसा कि अभ्यास से पता चलता है - कम कोड = कम समस्याएं।