पत्रों का लेआउट, स्निपेट्स का एक सेट

छवि लेखक MVBen

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

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

आवरण

एचटीएमएल

<table id="wrapper" align="center" width="600" cellpadding="20" cellspacing="0" style="border-collapse: collapse;"> <tr> <td> text </td> </tr> </table> 

सीएसएस

 @media only screen and (max-width:600px) { #wrapper { width:100% !important; } } 

हमें 600px पर एक पत्र आवरण मिलता है, जिसे स्क्रीन पर 100% चौड़ाई तक फैलाया जाएगा <600px चौड़ा।

पाठ लपेटें

बात सरल है। हम एक तस्वीर सेल और एक इंडेंट सेल के साथ एक प्लेट बनाते हैं, जो चित्र से पाठ को हरा देगा। मोबाइल प्लेटफार्मों पर, हम पिटाई को छिपाते हैं, और हम कंटेनर-आवरण की पूरी चौड़ाई पर चित्र के साथ टैबलेट को खींचते हैं।

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

एचटीएमएल

 <table align="left" class="picture" width="40%" cellpadding="0" cellspacing="0" style="border-collapse: collapse; float:left;"> <tr> <td valign="top"> <img style="width:100%;" src="picture.jpg" style="display:block;"> </td> <td class="float_fix" width="20"><img src="blank.gif" style="display:block;" width="20" height="20"></td> </tr> </table> 

सीएसएस

 @media only screen and (max-width:320px) { .picture { width:100% !important; float:none !important; display:block !important; } .float_fix { display:none !important; } } 

यदि आपके पास अधिक सुरुचिपूर्ण समाधान है, तो कृपया टिप्पणी करें।

पूर्ण-चौड़ाई वाली छवि

यहां सब कुछ सरल है। हम छवि को 100% चौड़ाई पर सेट करते हैं और इसे अवरुद्ध करते हैं, और चित्र से पहले और बाद में एक लाइन ब्रेक जोड़ते हैं।

 <br> <img src="picture.jpg" style="display:block; width:100%;"> <br> 

केंद्रित चित्र

हम अवरुद्ध का उपयोग नहीं करते हैं, क्योंकि कुछ मेलर्स में यह संरेखण को तोड़ता है। हम छोटी स्क्रीन पर छवि को फैलाने के लिए मीडिया क्वेरी लिखते हैं।

एचटीएमएल

 <div align="center"> <img class="picture" src="picture.jpg" width="400"> </div> 

सीएसएस

 @media only screen and (max-width:400px) { .picture { width:100% !important; } } 

टाइल

उद्देश्य: सामान के साथ छह ब्लॉक रखें (उदाहरण के लिए) ताकि वे छोटे स्क्रीन पर एक-दूसरे के नीचे रहें और स्क्रीन के आकार के आधार पर खिंचाव करें।

मूल टाइल तत्व, जिसे हम छह तत्वों से गुणा करते हैं:

 <table class="tile" align="left" width="33%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> <tr> <td> <table width="100%" cellpadding="10" cellspacing="0" style="border-collapse:collapse;"> <tr> <td> <a href="#" border="0" target="_blank" style="text-decoration:none;"> <img style="width:100%;" src="picture.jpg" border="0"> </a> </td> </tr> <tr> <td style="line-height:20px;"> <span style="font-family:georgia; font-size:14px; color:#333333;"> <a href="#" target="_blank" style="color:#000000 !important;"></a>  </span> </td> </tr> </table> </td> </tr> </table> 

और इसके लिए CSS:

 @media only screen and (max-width:480px) { .tile { width:50% !important; } } @media only screen and (max-width:320px) { .tile { width:100% !important; } } 

नतीजतन, हमें डिफ़ॉल्ट रूप से तीन तत्व मिलते हैं, प्रति स्क्रीन दो तत्व <480px स्क्रीन की चौड़ाई। और <320px के संकल्प पर तत्वों का एक स्तंभ;

अंत में

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