एचटीएमएल अनुकूली लेआउट. अनुकूली लेआउट

नमस्ते!

जब अनुकूली लेआउट का सिद्धांत सामने आया, तो यह मेरे लिए एक दुःस्वप्न साबित हुआ, जिससे मैं अभी भी उबर नहीं सका, यह एक ऐसा दर्द है - आखिरकार, प्रत्येक रिज़ॉल्यूशन के लिए आपको व्यावहारिक रूप से लेआउट को पुनर्व्यवस्थित करने, नया कोड लिखने की आवश्यकता होती है, आपके पास बहुत सारे कोड होते हैं जिनका रखरखाव करना अधिक कठिन होता है। आइए इस दर्द को "कोड एन्ट्रापी" के रूप में समझें

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

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

लेकिन! मुख्य मजाक यह है कि मैंने इस पद्धति का उपयोग एक अनुकूली मोबाइल एप्लिकेशन को डिजाइन करने के लिए किया, जहां डिजाइन समान था।

जब मैं अनुकूली पर लौटा नियमित साइटों के लिए- दर्द मेरे पास लौट आया पहले से भी अधिक शक्तिशाली,क्योंकि एक नियम के रूप में हमारे पास 3 से 6 अलग-अलग डिज़ाइन हैं:
1) बड़ा डेस्कटॉप 1600-1920 पिक्सेल
2) छोटा डेस्कटॉप/लैपटॉप ~1100-1400 पिक्सेल
3) ओल्ड मोनिका/टैबलेट - 768-1024 पिक्सेल
4) अंडर-टैबलेट/अधिक आकार वाला स्मार्टफोन ~600 पिक्सेल
5) स्मार्टफोन 300-480
6) पुराना स्मार्टफोन 250 पिक्सल।

बेशक, मैंने अतिशयोक्ति की, लेकिन निश्चित रूप से कम से कम तीन लेआउट करने की ज़रूरत है।

तो यहाँ प्रश्न संख्या 1 है और सबसे महत्वपूर्ण: अनुकूली लेआउट को कैसे कम करें और कोड को सुंदर कैसे बनाएं? तथाकथित को कैसे कम करें कोड की एन्ट्रापी? क्या कोई बढ़िया दृष्टिकोण/तकनीक है?

मैंने उत्तर खोजने के लिए कूल वेब स्टूडियो की विभिन्न साइटों को देखा और देखा कि हर कोई बेतरतीब ढंग से, यानी सामान्य तौर पर, काम कर रहा था। बिना परेशान किये.
एकमात्र चीज़ जो मैंने देखी वह यह है कि किसी कारण से कुछ लोग सामान्य पिक्सेल के बजाय फ़ॉन्ट के लिए ईएम और प्रतिशत का उपयोग करते हैं। ऐसा लगता है कि यह पाठ को स्केल करने के लिए है, हालांकि यह स्पष्ट नहीं है कि यह अनुकूलन के लिए कोड को कैसे कम करता है, मेरी राय में यह केवल सब कुछ जटिल बनाता है - आपको मूल ब्लॉक के फ़ॉन्ट आकार और यहां तक ​​​​कि प्रीप्रोसेसर के आधार पर गणना करने की आवश्यकता है। मदद नहीं करेगा... मुझे नहीं पता कि आपको ईएम इकाइयों में फ़ॉन्ट आकार सेट करने के बारे में चिंता करने की आवश्यकता क्यों है, रेम के साथ परेशानी अभी भी कहीं नहीं गई है... शायद मैं एक खराब लेआउट डिजाइनर हूं... द्वारा वैसे, उन साइटों में से सबसे जिद्दी ने मार्जिन और अन्य बॉक्स-आकार की संपत्तियों के लिए उनका उपयोग किया...
प्रश्न #2:
उन्हें इस्तेमाल करने का क्या मतलब है?
और अब प्रश्न संख्या 3:
क्या वास्तव में कोई एकल कार्यप्रणाली नहीं है, क्या लेआउट में सब कुछ वास्तव में इतना खराब है कि हर कोई जो चाहे वह कर सकता है? या क्या मैंने असफल उदाहरण देखे (हालाँकि मैं थीमफ़ॉरेस्ट के शीर्ष विषयों और शीर्ष वेब स्टूडियो की साइटों में से एक को देख रहा था)?

प्रस्तावना

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

लेख के बारे में

यह लेख उन डेवलपर्स के लिए है जिनके पास वेबसाइट लेआउट का अनुभव है और जो जानते हैं एचटीएमएलऔर सीएसएसजो सीएसएस चयनकर्ताओं आदि के उद्देश्य को समझते हैं।

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

लेआउट के प्रकार

आइए मुख्य प्रकार के लेआउट, उनके अंतर और उनके कार्यान्वयन में उपयोग किए जाने वाले बुनियादी सिद्धांतों को देखें।

निश्चित लेआउट

फिक्स्ड लेआउट एक निश्चित चौड़ाई वाले वेबसाइट पेज बनाने का एक तरीका है। पृष्ठ पर घटकों की चौड़ाई नहीं बदलती. कम-रिज़ॉल्यूशन मॉनिटर पर, एक क्षैतिज स्क्रॉल बार दिखाई देता है। इस प्रकार का लेआउट मोबाइल उपकरणों पर जानकारी के सुविधाजनक प्रदर्शन के लिए उपयुक्त नहीं है।
नीचे दिया गया उदाहरण किसी टैग के लिए चौड़ाई को सख्ती से निर्धारित करने को दर्शाता है शरीर:

रबर लेआउट

इलास्टिक लेआउट का तात्पर्य वेबसाइट घटकों की ब्राउज़र विंडो के आकार के आधार पर, निर्दिष्ट न्यूनतम और अधिकतम आकारों तक विस्तार करते हुए, उनके आकार को बदलने की क्षमता से है। यह सापेक्ष मूल्यों का उपयोग करके प्राप्त किया जाता है, अधिकतम-चौड़ाई/न्यूनतम-चौड़ाई(अधिकतम/न्यूनतम चौड़ाई), अधिकतम-ऊंचाई / न्यूनतम-ऊंचाई(अधिकतम/न्यूनतम ऊंचाई).
रबर लेआउट तकनीकों का उपयोग करने के उदाहरण:

अनुकूली लेआउट

अनुकूली लेआउट (अनुकूली लेआउट ) मुख्य कंटेनर और साइट के किसी भी अन्य तत्व को स्क्रीन रिज़ॉल्यूशन के अनुकूल बनाने की अनुमति देता है, जिससे फ़ॉन्ट आकार, वस्तुओं की व्यवस्था, रंग आदि को बदलना संभव हो जाता है। यह गतिशील रूप से होता है, उदाहरण के लिए, मीडिया प्रश्नों का उपयोग करना ( @मीडिया), आपको मॉनिटर रिज़ॉल्यूशन, डिवाइस प्रकार को स्वचालित रूप से निर्धारित करने और स्वचालित मोड में निर्दिष्ट मानों को प्रतिस्थापित करने की अनुमति देता है। नीचे दिया गया उदाहरण चौड़ाई निर्धारित करता है डिवबराबर 960px 1200pxऔर 320pxउन सभी उपकरणों के लिए जिनकी चौड़ाई छोटी है 480px गुणित.

उत्तरदायी लेआउट

रिस्पॉन्सिव लेआउट तरल और अनुकूली लेआउट का एक संयोजन है। यह दृष्टिकोण मीडिया क्वेरी और घटक चौड़ाई के प्रतिशत विनिर्देश दोनों का उपयोग करता है। इस प्रकार के लेआउट का उपयोग करके, हम विश्वास के साथ कह सकते हैं कि साइट किसी भी डिवाइस के अनुकूल होगी।
चौड़ाई नीचे निर्धारित है डिवउन सभी उपकरणों के लिए मूल घटक के आकार के 50% के बराबर जिनकी चौड़ाई 1200px से कम है और उन सभी उपकरणों के लिए 100% जिनकी चौड़ाई 480px से कम है।

किसी भी रिज़ॉल्यूशन सापेक्ष मूल्यों पर वेबसाइटों को लागू करने की बुनियादी तकनीकें

सापेक्ष मूल्यों का उपयोग करने से आप पठनीयता या दृश्यता खोए बिना किसी पृष्ठ पर जानकारी और घटकों को प्रदर्शित कर सकते हैं।

आकार और पैडिंग के लिए सापेक्ष मान

सापेक्ष मूल्यों को निर्दिष्ट किया जा सकता है चौड़ाई, ऊंचाई, मार्जिन, पैडिंगआदि। सापेक्ष आकार निर्दिष्ट करने का सबसे प्रसिद्ध तरीका प्रतिशत (%) के रूप में है।
नीचे मूल घटक के आकार की चौड़ाई को 90% पर सेट करने का एक उदाहरण दिया गया है।

इस मामले में, मान की गणना मूल घटक के सापेक्ष की जाती है।
स्क्रीन आकार के संबंध में भी मूल्य हैं:

• vw- खिड़की की चौड़ाई का 1%। जब विंडो की चौड़ाई कम हो जाती है, तो तत्व की चौड़ाई, ऊंचाई और फ़ॉन्ट कम हो जाते हैं;
• वी.एच- खिड़की की ऊंचाई का 1%. जब विंडो की ऊंचाई कम हो जाती है, तो तत्व की चौड़ाई, ऊंचाई और फ़ॉन्ट कम हो जाते हैं;
• वीमिन - सबसे छोटे का चयन करें vwऔर वी.एच;
• vmax - सबसे बड़ा चुना गया है vwऔर वी.एच.

नीचे उपयोग का एक उदाहरण है vwऔर वी.एच. इस मामले में, टैग की चौड़ाई और ऊंचाई डिवक्रमशः स्क्रीन की चौड़ाई और ऊंचाई के 50% के बराबर होगी।

फ़ॉन्ट आकार के लिए सापेक्ष मान

फ़ॉन्ट के लिए निम्नलिखित सापेक्ष मान मौजूद हैं:

• ईएम- मूल फ़ॉन्ट के सापेक्ष आकार सेट करता है;
• रेम- फ़ॉन्ट के सापेक्ष आकार सेट करता है।

आइए एक उदाहरण देखें:

टैग के लिए फ़ॉन्ट आकार की गणना करें शरीर. इस उदाहरण में, फ़ॉन्ट का आकार शरीरआकार के सापेक्ष निर्दिष्ट एचटीएमएल. तो फ़ॉन्ट आकार के लिए शरीर 30 के बराबर होगा पिक्सल (20पिक्सल * 1.5 = 30पीएक्स).

आप % का उपयोग करके सापेक्ष फ़ॉन्ट आकार भी सेट कर सकते हैं, वीडब्ल्यू,वीएचआदि। निम्नलिखित उदाहरण में, फ़ॉन्ट का आकार शरीरफ़ॉन्ट आकार के 80% के बराबर एचटीएमएल - 16पिक्सल.

अधिकतम और न्यूनतम घटक आकार

किसी घटक की चौड़ाई और ऊंचाई के लिए अधिकतम और न्यूनतम मान निर्धारित करने के लिए, गुणों का उपयोग करें अधिकतम-चौड़ाई/न्यूनतम-चौड़ाईऔर अधिकतम-ऊंचाई / न्यूनतम-ऊंचाईक्रमश।

आइए एक उदाहरण देखें:

आइए मान लें कि यह इसका मूल घटक है डिवहै शरीर. फिर, जब स्क्रीन की चौड़ाई बदलती है, तो इस घटक की चौड़ाई चौड़ाई का 60% होगी शरीर. हालाँकि, यह केवल निर्दिष्ट राशि तक ही बढ़ेगा अधिकतम-चौड़ाई, यह 500 है पिक्सल. जैसे ही कंटेनर इस चौड़ाई तक पहुंचेगा, उसका बढ़ना बंद हो जाएगा।

मीडिया क्वेरीज़ का उपयोग करना

मीडिया क्वेरीज़ आपको विशिष्ट स्क्रीन आकार, डिवाइस विशेषताओं के आधार पर डिवाइस प्रकार आदि के लिए शैलियाँ निर्दिष्ट करने की अनुमति देती हैं। सभी मीडिया क्वेरीज़ इसी से शुरू होती हैं @मीडिया, और फिर शर्त का पालन करता है।

मीडिया क्वेरीज़ का उपयोग करके, आप निम्नलिखित डिवाइस प्रकारों के लिए शैलियाँ सेट कर सकते हैं:

• सभी- सभी प्रकार (डिफ़ॉल्ट मान)
• ब्रेल- ब्रेल प्रणाली पर आधारित उपकरण, जो नेत्रहीन लोगों द्वारा पढ़ने के लिए हैं
• उभरा- मुद्रण के लिए ब्रेल प्रणाली का उपयोग करने वाले प्रिंटर
• हाथ में- स्मार्टफोन और इसी तरह के उपकरण
• छपाई- प्रिंटर और अन्य मुद्रण उपकरण
• अनुमान- प्रोजेक्टर
• स्क्रीन- मॉनिटर स्क्रीन
• भाषण- वाक् सिंथेसाइज़र, साथ ही पाठ को ज़ोर से बजाने के लिए कार्यक्रम
• ट्टी- निश्चित वर्ण आकार वाले उपकरण
• टीवी- टीवी.

मॉनिटर स्क्रीन, स्मार्टफोन आदि पर डिव टैग के लिए चौड़ाई निर्धारित करने का एक उदाहरण।

अनुकूली लेआउट लागू करने की तकनीकों के लिंक

आप निम्नलिखित लिंक का उपयोग करके इस लेख और अन्य में चर्चा किए गए दृष्टिकोणों को अधिक विस्तार से देख और अध्ययन कर सकते हैं:

• क्या हमें मोबाइल संस्करण बनाना चाहिए? 5 सामान्य समस्याएं जो अनुकूली लेआउट हल करती हैं। यांडेक्स अनुभव

सीएसएस ढाँचे

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

• तेजी से विकास
• क्रॉस-ब्राउज़र समर्थन
• विभिन्न उपकरणों और स्क्रीन आकारों का समर्थन करता है
• एक टीम के रूप में काम करते समय कोड की स्थिरता विकास के दौरान असहमति को कम करती है।

स्क्रिप्टिंग प्रोग्रामिंग भाषाओं की लाइब्रेरी की तरह, सीएसएस-पुस्तकालय, आमतौर पर बाहरी स्वरूप वाले होते हैं सीएसएस-फ़ाइल को वेब पेज के हेडर में जोड़ा जाता है।

आइए सबसे लोकप्रिय पर नजर डालें सीएसएस-ढांचे।

बूटस्ट्रैप

प्रतिक्रियाशील और मोबाइल विकास के लिए सबसे लोकप्रिय ढाँचा वेब-परियोजनाएँ। बूटस्ट्रैपवेबसाइटों को विकसित करने के लिए एक खुला स्रोत उपकरण है एचटीएमएल, सीएसएस और जेएस। बूटस्ट्रैप- एक सहज सरल और साथ ही शक्तिशाली इंटरफ़ेस ढांचा जो गति बढ़ाता है और विकास को सुविधाजनक बनाता है वेब-अनुप्रयोग.

बूटस्ट्रैपआपके प्रोजेक्ट को एक कोड बेस के साथ आसानी से और कुशलता से स्केल किया जा सकता है - फ़ोन और टैबलेट से लेकर डेस्कटॉप कंप्यूटर तक। इसके लिए 12-स्तंभ ग्रिड का उपयोग किया जाता है:

निम्न के अलावा सीएसएसइस ढांचे में दो सबसे लोकप्रिय के लिए समर्थन शामिल है सीएसएस-प्रीप्रोसेसर: कमऔर सास.

विशिष्ट विशेषताएं:

• 12 - स्तंभ ग्रिड
• बड़ी संख्या में उपयोग के लिए तैयार घटक
• सहायता कमऔर सास
• प्रयोग सामान्यीकरण.सीएसएस.

बूटस्ट्रैप के लिए सामग्री डिज़ाइन

बूटस्ट्रैप के लिए सामग्री डिज़ाइनएक ओपन सोर्स एप्लिकेशन डेवलपमेंट टूलकिट पर आधारित है बूटस्ट्रैपऔर दृष्टिकोणों का उपयोग करना सामग्री डिज़ाइन.
फ्रेमवर्क आपको वेरिएबल्स का उपयोग करके जल्दी से एक एप्लिकेशन बनाने की अनुमति देता है सैस,अनुकूली ग्रिड, बड़ी संख्या में तैयार घटक और शक्तिशाली प्लगइन्स लागू किए गए jQuery।

विशिष्ट विशेषताएं:

• 12 - स्तंभ ग्रिड
• अवधारणा के अनुसार बड़ी संख्या में उपयोग के लिए तैयार घटक सामग्री डिज़ाइन.

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

अनुकूलनशीलता की अवधारणा

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

अनुकूली लेआउट आपको न केवल कंप्यूटर मॉनीटर पर, बल्कि कार्यक्षमता के नुकसान के बिना मोबाइल फोन (स्मार्टफोन) की स्क्रीन पर भी साइट को समान रूप से आसानी से देखने की अनुमति देता है।

अनुकूली लेआउट के लिए मीडिया प्रश्न

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

अनुकूलनशीलता के बुनियादी सिद्धांत

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

और यह दो तरीकों से हासिल किया जाता है:

ब्लॉकों को हटाना (छिपाना) और/या उन्हें आपस में पुनर्वितरित करना;

स्क्रीन की चौड़ाई के आधार पर ब्लॉक आकार बदलें।

एक उत्कृष्ट उदाहरण साइडबार कॉलम को मुख्य सामग्री के नीचे ले जाना है।

उसी समय, साइडबार की चौड़ाई मुख्य सामग्री की चौड़ाई के बराबर हो गई, और वे दोनों, बदले में, स्क्रीन की पूरी चौड़ाई में फैल गईं।

स्क्रीन की चौड़ाई के आधार पर साइडबार ब्लॉक को कैसे हटाएं

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

सबसे सरल मामले में, सीएसएस कोड इस तरह दिखेगा:

@मीडिया केवल स्क्रीन और (अधिकतम-चौड़ाई: 1199पीएक्स) ( .सामग्री(फ्लोट: कोई नहीं;) .साइडबार(फ्लोट: कोई नहीं;))

इसे स्टाइल फ़ाइल के अंत में रखा जाना चाहिए, कम से कम डेस्कटॉप कंप्यूटर पर प्रदर्शन के लिए स्वरूपित होने के बाद।

कोड के लिए स्पष्टीकरण:पहली पंक्ति में हम कहते हैं कि निम्नलिखित शैलियाँ 1199 पिक्सेल तक की स्क्रीन चौड़ाई वाले उपकरणों पर लागू होंगी। ऐसे उपकरणों के लिए, साइडबार एक फ़्लोटिंग ब्लॉक नहीं रह जाता है और साइट के HTML कोड में उसके क्रम के अनुसार प्रदर्शित होता है। इसलिए, यदि आप चाहते हैं कि सामग्री के बाद साइडबार दिखाई दे, तो आपको साइडबार कोड मुख्य सामग्री कोड के नीचे होना चाहिए, जैसे:

... ...

स्वचालित ब्लॉक चौड़ाई - रबर लेआउट

आपको सामग्री ब्लॉक और साइडबार की चौड़ाई के साथ भी काम करना चाहिए। मोबाइल ग्राहकों पर देखते समय उन्हें "रबड़" बनाना आवश्यक है:

@मीडिया केवल स्क्रीन और (अधिकतम-चौड़ाई: 1199पीएक्स) ( .सामग्री (चौड़ाई:100%;).साइडबार (चौड़ाई:100%;))

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

वेबसाइट के लिए अनुकूली छवियाँ

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

Img (अधिकतम-चौड़ाई:100%; ऊंचाई: ऑटो;)

लंबे शब्दों से समस्या

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

हाइफ़नेट (ओवरफ़्लो-रैप: ब्रेक-वर्ड; वर्ड-रैप: ब्रेक-वर्ड; -वेबकिट-हाइफ़न: ऑटो; -एमएस-हाइफ़न: ऑटो; -मोज़-हाइफ़न: ऑटो; हाइफ़न: ऑटो;)

अनुकूली वेबसाइट मेनू

साइट मेनू को अनुकूलित करने की भी सलाह दी जाती है, खासकर यदि इसमें कई आइटम हैं, क्योंकि यह स्क्रीन के एक महत्वपूर्ण हिस्से पर कब्जा कर सकता है। मेनू सामग्री के लिए स्क्रीन को जितना संभव हो उतना खाली करने के लिए, वे आमतौर पर मेनू को छिपाते हैं और इसके बजाय एक बटन (लिंक) दिखाते हैं, जब क्लिक किया जाता है, तो मेनू स्क्रीन पर दिखाया जाएगा।

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

CSS में इसे लागू करना बहुत आसान है।

#मेनमेनू (डिस्प्ले:ब्लॉक;) #मोबाइलमेनू(डिस्प्ले:कोई नहीं;) @मीडिया केवल स्क्रीन और (अधिकतम-चौड़ाई: 1199पीएक्स) ( #मेनमेनू (डिस्प्ले:कोई नहीं;) #मोबाइलमेनू(डिस्प्ले:ब्लॉक;) )

जैसे ही स्क्रीन की चौड़ाई 1200 पिक्सेल से कम हो जाएगी, मुख्य मेनू स्क्रीन से गायब हो जाएगा, और इसे खोलने के लिए एक लिंक दिखाई देगा (अधिक सटीक रूप से, एक लिंक या बटन वाला एक ब्लॉक दिखाया जाएगा)।

कृपया ध्यान दें कि इस मामले में ब्लॉक आईडी का उपयोग किया जाता है, स्टाइल क्लास का नहीं। और मुख्य मेनू कोड कुछ इस तरह दिखेगा:

<div id='mainmenu'>साइट का मुख्य मेनू

जब आप किसी बटन पर क्लिक करते हैं तो मुख्य मेनू दिखाने के लिए, HEAD अनुभाग में एक छोटी स्क्रिप्ट जोड़ें:

फ़ंक्शन showmobilemenu() ( यदि (document.getElementById("mainmenu").style.display == "block") (document.getElementById("mainmenu").style.display = "none") अन्यथा (document.getElementById(" मेनमेनू").स्टाइल.डिस्प्ले = "ब्लॉक"))

लेखक की ओर से: भविष्य में इंटरनेट की दुनिया में मोबाइल ट्रैफ़िक में लगातार वृद्धि की उम्मीद है। इसका मतलब है कि अब आपको लेआउट बनाने में सक्षम होने की आवश्यकता है ताकि आपका प्रोजेक्ट सभी उपकरणों पर अच्छा दिखे। समाधान बहुत पहले मिल चुका है - अनुकूली वेबसाइट लेआउट! हम उसके बारे में बात करेंगे.

मोबाइल यूजर्स को खुश करने के 2 तरीके

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

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

चावल। 1. जैसा कि आप देख सकते हैं, मोबाइल फोन पर भी वेबफॉर्मिसेल्फ़ अच्छी तरह से प्रदर्शित होता है।

अनुकूलनशीलता यात्रा की शुरुआत है

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

@मीडिया केवल स्क्रीन और (अधिकतम-चौड़ाई: 980px)()

@मीडिया केवल स्क्रीन और (अधिकतम - चौड़ाई: 980px) ( )

आइए इस प्रविष्टि पर करीब से नज़र डालें।

@मीडिया - मीडिया क्वेरी का वास्तविक पदनाम

स्क्रीन - हम इंगित करते हैं कि यह स्क्रीन को संदर्भित करता है (यहां आप टीवी या प्रोजेक्टर भी निर्दिष्ट कर सकते हैं)। केवल - इसका मतलब है कि नियम केवल स्क्रीन पर लागू होंगे।

और (और) - एक शर्त जोड़ना जिसके लिए मीडिया क्वेरी काम करेगी। शर्त कोष्ठक में जोड़ी गई है.

अधिकतम-चौड़ाई: 980px - स्थिति ही। सरल शब्दों में, इसका मतलब है कि मीडिया क्वेरी तब काम करेगी जब स्क्रीन की चौड़ाई अधिकतम 980 पिक्सेल (अर्थात 0 से 980px तक) हो। यदि चौड़ाई 980 से अधिक है, तो नियम काम नहीं करेंगे। अक्सर, यहां स्थितियाँ अधिकतम-चौड़ाई, न्यूनतम-चौड़ाई, अधिकतम-डिवाइस-चौड़ाई, न्यूनतम-डिवाइस-चौड़ाई होती हैं। अंतिम दो का मतलब है कि नियम केवल मोबाइल उपकरणों पर ही काम करेंगे (अर्थात, कंप्यूटर पर विंडो की चौड़ाई बदलते समय, एक क्षैतिज स्क्रॉल दिखाई देगा)। आप अधिकतम-ऊंचाई भी निर्दिष्ट कर सकते हैं, लेकिन इसका उपयोग बहुत कम ही किया जाता है।

() – सभी सीएसएस नियम इन घुंघराले ब्रेसिज़ में लिखे गए हैं। उनमें से जितने चाहें उतने हो सकते हैं। मैं आपको इसे स्पष्ट करने के लिए कुछ उदाहरण देता हूँ:

@मीडिया केवल स्क्रीन और (अधिकतम-चौड़ाई: 980px)( .selector(पृष्ठभूमि: काला) ) @मीडिया केवल स्क्रीन और (न्यूनतम-चौड़ाई: 600px)( img(फ्लोट: बाएँ))

@मीडिया केवल स्क्रीन और (अधिकतम - चौड़ाई: 980px) ( चयनकर्ता (पृष्ठभूमि: काला) @मीडिया केवल स्क्रीन और (न्यूनतम - चौड़ाई: 600px) ( img (फ्लोट: बाएँ)

आइए इसे मानव भाषा में अनुवाद करें: यदि विंडो की चौड़ाई 980 पिक्सेल से कम है, तो नियम (पृष्ठभूमि: काला) चयनकर्ता वर्ग वाले तत्व पर लागू किया जाएगा। और भी सरल शब्दों में कहें तो इस तत्व की पृष्ठभूमि काली हो जाएगी।

दूसरा उदाहरण: यदि विंडो की चौड़ाई 600 पिक्सेल से अधिक है, तो सभी छवियों को बाएँ किनारे पर दबाया जाएगा।

क्या आपको पहले से ही इस लेआउट पद्धति की प्रतिभा का एहसास हो गया है? अनिवार्य रूप से, मीडिया नियमों की सहायता से, आप मौजूदा को समायोजित कर सकते हैं या नए सीएसएस नियम जोड़ सकते हैं। इस तरह आप पूरी तरह उत्तरदायी टेम्पलेट लागू कर सकते हैं।

चावल। 2. मीडिया क्वेरी का एक उदाहरण जो वाइडस्क्रीन मॉनिटर के लिए नियम निर्दिष्ट करता है।

अनुकूलनशीलता के बारे में और जानें

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

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

क्या अनुकूली लेआउट में महारत हासिल करना मुश्किल है?

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

अनुकूलनशीलता का परीक्षण कैसे करें

ऐसा करने का सबसे आसान तरीका ब्राउज़र है। उदाहरण के लिए, मेरे Google Chrome में, जब मैं F12 दबाता हूं, तो डिबगर प्रकट होता है। अब विंडो का आकार बदलने का प्रयास करें। ऊपरी दाएँ कोने में आपको इसकी चौड़ाई का मान दिखाई देगा। यह आपके लेआउट की त्वरित जांच के लिए बहुत सुविधाजनक है। मैं responsivetest.net की भी अनुशंसा कर सकता हूं। सेवा काफी सुविधाजनक है और अनुकूलन क्षमता का परीक्षण करने का उत्कृष्ट कार्य करती है।

चावल। 3. जब आप F12 दबाए रखते हैं, तो डिबगर प्रकट होता है। अब ऊपरी दाएं कोने में आप बदलते समय विंडो की वर्तमान चौड़ाई देख सकते हैं।

अनुकूली लेआउट क्यों?

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

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