हम कोड 5 वास्तव में उपयोगी अनुकूली लेआउट टेम्पलेट्स में अनुवाद करते हैं

सभी का अभिवादन।

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

* कौन नहीं पढ़ना चाहता, नीचे दिए गए लिंक

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

शब्दों से कर्मों तक

मैं हर टेम्पलेट को पेंट नहीं करूंगा क्योंकि कई मामलों में, मूल तत्वों का कार्यान्वयन बहुत समान है, और मैं एक का विश्लेषण करेगा, सबसे दिलचस्प टेम्पलेट, टेम्पलेट नंबर 4:

हमारे पास क्या है:

1) लोगो;
2) ऊपरी दाएं कोने में मेनू;
3) पाठ और एक तस्वीर से मिलकर एक निश्चित ब्लॉक;
4) तीन कॉलम, जिनमें से प्रत्येक की अपनी सामग्री है;

एक आधार के रूप में, मैंने हर जगह एक सामान्य आवरण लिया, 80% चौड़ा, लेकिन 960pc से अधिक नहीं। सब कुछ 3 बड़े ब्लॉकों में विभाजित किया गया: शीर्ष, मुख्य और सामग्री।
लोगो के साथ कोई समस्या नहीं है, हमने इसे शीर्ष पर रखा और इसे जीवन के लिए लटका दिया।
और यहां हम मेनू को float: right माध्यम से भेजते हैं float: right ओर दाईं ओर, कुल चौड़ाई का 60% आकार सेट करें।

 .item { float: right; width: 60%; } 

हम float: left माध्यम से एक पंक्ति में मेनू आइटम की व्यवस्था करते हैं float: left , उन्हें आकार और इंडेंटेशन सेट करने के लिए नहीं भूलना:

 .list { float: left; width: 24%; height: 50px; margin: 0 0 0 1%; } 

* क्योंकि मैंने सामग्री स्कोर नहीं की है, तो मैं लगभग हर जगह ऊँचाई का संकेत देता हूँ। एक वास्तविक परियोजना में, आप सामग्री की मात्रा पर भरोसा कर सकते हैं

हम टेक्स्ट ब्लॉक को 50% चौड़ा बनाते हैं:

 .m-text { float: left; width: 50%; font-size: 20px; font-style: italic; line-height: 1.5em; } 

और उन्होंने float: right माध्यम से "चित्र" भेजा float: right से दाएं, इसे 40% की चौड़ाई के साथ प्रदान किया, जिससे ब्लॉक के बीच 10% का मार्जिन बना।

 .m-image { float: right; width: 40%; min-height: 360px; } 

* मैं सीमा-त्रिज्या के आयामों की गणना नहीं करना चाहता था, इसलिए सर्कल चौकोर होगा;)

अब हम एक ही float माध्यम से तीन कॉलम करते हैं:

 .c-block, .c-article, .c-comment { float: left; width: 30%; } 

मैं फ्लोट का उपयोग लगभग हर जगह क्यों करता हूं, मैं नीचे लिखूंगा।

कॉलम में हम सामग्री को नियमित ब्लॉक में रखते हैं। मुझे लगता है कि कोई सवाल नहीं है।
हमारा लेआउट तैयार है और हम परिवर्तन शुरू कर रहे हैं।

लगभग सभी टेम्प्लेट में, मैंने दो प्रकार के स्क्रीन आकार का उपयोग किया: 600 और 800 पिक्सेल, लेकिन कोई भी निषिद्ध नहीं, यहां तक ​​कि प्रत्येक पिक्सेल को हमारे द्वारा आवश्यक व्यवहार को लटका देने के लिए भी।

तो, 800pc की चौड़ाई के साथ, हमारे पास अभी भी लोगो, मेनू, टेक्स्ट ब्लॉक और जगह में चित्र होगा। हम उन्हें स्पर्श नहीं करते हैं। उनके आकार रबर हैं, और इस संकल्प के साथ सब कुछ पूरी तरह से उपलब्ध और पठनीय रहेगा। लेकिन हमारे बाईं ओर "बैनर" वाले ब्लॉक ने एक क्षैतिज स्थिति में ले लिया, एक पंक्ति में खुद के अंदर सभी ब्लॉकों का निर्माण किया।
ऐसा करने के लिए, आयामों के साथ @media screen and (min-width: 600px) and (max-width: 800px)
हम float रद्द करते हैं और इसे पूरी चौड़ाई तक फैलाते हैं:

 .c-block { float: none; width: 100%; margin: 0 0 30px 0; overflow: hidden; } 

इसके विपरीत, अंदर के ब्लॉकों के लिए, एक float लागू करें और आवश्यक आकार सेट करें:

 .b-list { float: left; width: 32%; margin: 0 0 0 2%; } .b-list:first-child { margin: 0; } 

हम शेष दो स्तंभों को एक ईमानदार स्थिति में छोड़ देते हैं, केवल कुल चौड़ाई का आधा भाग तक खींचते हैं:

 .c-article { width: 48%; margin: 0; } .c-comment { width: 48%; margin: 0 0 0 4%; } 

हमें इसका परिणाम मिलता है!

हमारे पास अगली चौड़ाई 600 पिक्सेल है: @media screen and (max-width: 600px)
यहाँ परिवर्तन अधिक परिमाण का क्रम बन जाता है।
सबसे पहले, हम लोगो के नीचे मेनू को शिफ्ट करते हैं, दोनों से float को हटाते हैं और इसे अपनी पूरी चौड़ाई तक फैलने की अनुमति देते हैं (यह 4 बिंदुओं के लिए पहले से ही बड़ा नहीं है)।

 .logo { float: none; } .item { float: none; width: 100%; margin: 30px 0 0; } 

टेक्स्ट ब्लॉक भी पूरी चौड़ाई तक फैला हुआ है और हमेशा की तरह हम float हटाते हैं:

 .m-text { float: none; width: 100%; margin: 0 0 40px 0; } 

और तस्वीर के साथ ब्लॉक "इसके तहत" भेजा जाता है, float रद्द करना:

 .m-image { float: none; width: 80%; margin: 0 auto; } 

जैसा कि हम याद करते हैं, चित्र की चौड़ाई अभी भी शुरू में सेट की गई थी, लेकिन यहां हम इसे बेहतर दिखने के लिए थोड़ा ठीक करेंगे।

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

लेकिन "लेख" और "टिप्पणियों" वाले ब्लॉक अब लेआउट की संपूर्ण चौड़ाई के पूर्ण स्वामित्व वाले मालिक बन गए हैं:

 .c-article { float: none; width: 100%; margin: 0 0 30px 0; } .c-comment { float: none; width: 100%; margin: 0; } 

इस प्रकार, हमें पूरी तरह से ऊर्ध्वाधर पृष्ठ संरचना मिली, और हमारा लेआउट पूरी तरह उत्तरदायी बन गया।

वह सब तरकीब है। नीचे दिए गए सभी लेआउट के उदाहरणों के लिंक। इस बीच ...

टिप्पणियां

फ्लोट का इस्तेमाल क्यों किया

मैं खुद इनलाइन ब्लॉक को ज्यादा पसंद करता हूं। और जैसा कि हम जानते हैं, इनलाइनों की चौड़ाई में ब्लॉकों के बीच की चौड़ाई को ध्यान में रखना है। हम उनसे निपटना भी जानते हैं । लेकिन हमें केवल रिक्त स्थान को हटाने की आवश्यकता है, लेकिन ब्लॉकों के बीच के इंडेंटेशन की नहीं, क्योंकि अधिकांश विधियां यहां बह गई हैं।
सेवा font-size: 0; में बने font-size: 0; और ब्लॉक के बीच टिप्पणी।

फ़ॉन्ट-आकार: 0;

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

“माता-पिता के शून्य फ़ॉन्ट-आकार के मूल्य के कारण, हम वंशजों की लंबाई की मापनीय इकाइयों को लागू नहीं कर सकते, क्योंकि "वे विरासत में प्राप्त फ़ॉन्ट आकार पर आधारित हैं और, तदनुसार, हमारे मामले में शून्य से।"

हालाँकि मैंने आकारों के लिए पिक्सेल का उपयोग किया, लेकिन मैंने उदाहरण को अधिक सार्वभौमिक बनाने का निर्णय लिया और इस पद्धति को खारिज कर दिया।

ब्लॉक के बीच रिक्त स्थान के भौतिक \ ब्लॉक हटाने के बीच टिप्पणियाँ

मैं ऐसे तरीकों का उपयोग लगभग कभी नहीं करता हूं। खराब कोड पठनीयता के कारण। वैसे भी, यह सब बहुत विडंबना नहीं है, कहीं न कहीं वे कुछ भूल गए और सब कुछ दूर चला गया।
सामान्य तौर पर, आप इनलाइन ब्लॉक का उपयोग कर सकते हैं, लेकिन कुछ मामलों में आपको समझौता करना होगा।

शैलियाँ एक हैं और वे विरासत में मिली हैं!

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

अनुमतियाँ और उनकी मात्रा

मीडिया के प्रश्नों की मदद से हम बहुत सारे परिवर्तन कर सकते हैं। लेकिन, एक नियम के रूप में, मुख्य रूप से विशिष्ट मूल्यों का उपयोग किया जाता है।

मोबाइल:

240 * 320 रु
320 * 480 \ 240
480 * 800

गोलियाँ:

800 * 600 \ 480
1024 * 768 \ 600

पीसी और लैपटॉप

1024 पिक्सेल से (हम बहुत पुराने को ध्यान में नहीं रखेंगे)।

इसलिए इनमें से प्रत्येक अनुमतियों के लिए, हम मार्कअप का अपना "व्यवहार" बना सकते हैं। इस मामले में, हमें गुणों की विरासत को याद रखना चाहिए।
उदाहरण के लिए, यहां: @media screen and (min-width: 600px) and (max-width: 800px) हमने एक बार में दो मान निर्दिष्ट किए हैं। इस प्रकार, हम ऐसे रूपांतरण कर सकते हैं जो स्क्रीन आकार में 600 से 800 पिक्सल तक फिट होते हैं।
यदि इस स्थिति में आप न्यूनतम आकार निर्दिष्ट नहीं करते हैं, तो जब शैलियों को लिखते हैं, उदाहरण के लिए, 320 पिक्सेल के लिए, max-width: 800px लिए लिखी गई शैलियों max-width: 800px को ध्यान में रखा जाएगा, क्योंकि 320 स्पष्ट रूप से 800 में फिट बैठता है। दो तरीके हैं:
1) कम अनुमतियों के लिए संपत्तियों को ओवरराइड करें (हमें अनावश्यक कोड के ढेर की आवश्यकता क्यों है?)।
2) मीडिया प्रश्नों में दोहरे मूल्यों का उपयोग करें। इस प्रकार, हम कुछ स्क्रीन आकारों के लिए अपने लेआउट के बिंदु रूपांतरण कर सकते हैं।

हालाँकि, केवल एक पैरामीटर निर्दिष्ट करने से वारंट हो सकता है। उदाहरण के लिए, जब सभी प्रस्तावों पर हमें समान ब्लॉक स्थिति / आकार की आवश्यकता होती है। हम इसे एक बार सेट करते हैं और इसे भूल जाते हैं।

अच्छा

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

 *{ -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } 

वास्तव में, यह एक समान अपमान है, लेकिन मैंने इसे केवल सुंदरता के लिए छोड़ दिया। एक वास्तविक परियोजना में, ऐसा मत करो :)

अल्पाहार के लिए

ऐसी सेवाएँ जो मैं विभिन्न प्रस्तावों में देखता हूं (ठीक है, बस मामले में, यह काम आ सकता है)।
http://quirktools.com/
http://viewlike.us/

नमूना टेम्पलेट

एक , दो , तीन , चार , पांच ।
सब कुछ ब्राउज़र क्रोम 17.0.963.83 मीटर, फ़ायरफ़ॉक्स 11.0, ओपेरा 11.62, सफारी 5.1.4, आईई 9. सब कुछ विंडोज 7 के तहत और मोबाइल उपकरणों की एक जोड़ी पर परीक्षण किया गया था।

UPD shimdim आपको आईफ़ोन के लिए न्यूनतम-डिवाइस-चौड़ाई और अधिकतम-डिवाइस-चौड़ाई का उपयोग करने के लिए कहता है।
कोड इस तरह दिखेगा:

 @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { } @media only screen and (min-width: 480px) and (max-width: 768px), only screen and (min-device-width: 480px) and (max-device-width: 768px) { } 

आपका ध्यान देने के लिए धन्यवाद।