पत्र और ईमेल न्यूज़लेटर्स का लेआउट। थोड़ा सा जीमेल मैजिक

माइक, क्रिएटिव मिनिट्स द्वारा छवि

शुभ दोपहर मैंने पहले ही एक से अधिक बार लिखा है कि ईमेल क्लाइंट में media_queries ठीक काम करती है। यहां तक ​​कि ब्राउज़र में outlook.com उन्हें उचित रूप से मानता है। लेकिन सेब और Android पर जीमेल ऐसा नहीं लगता है।

यदि अन्य ग्राहकों के मामले में, हम कर सकते हैं, उदाहरण के लिए, यह:

@media only screen and (max-width:480px) { .big_img { display:none !important; } .small_img { display:block !important; } } @media only screen and (max-width:600px) { .big_img { display:block !important; } .small_img { display:none !important; } } 

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

मान लें कि हमारे पास निम्नलिखित कोड वाला एक पत्र है:

 <table class="wrapper" bgcolor="#eeeeee" width="600" cellpadding="20" cellspacing="0" style="border-collapse:collapse;"> <tr> <td><!-- content --></td> </tr> </table> 

और इसके लिए media_queries भी:

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

इस मामले में, डेस्कटॉप पर हर जगह हमें 600px की चौड़ाई के साथ एक पत्र मिलता है। मोबाइल ग्राहकों में 100%। अपवाद जीमेल है, जो थोड़ा अलग व्यवहार करेगा। और रैपर के अंदर की सामग्री के आधार पर अलग-अलग तरीकों से।

सामग्री ब्लॉक या इस तरह के चित्र में पाठ के ढेर के मामले में

 <img src="1450828071767932483708" width="100%"> 

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

अब उसे इस तरह की सामग्री देते हैं।

 <table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> <tr> <td bgcolor="#cccccc" align="center"> <a href="#" target="_blank" style="text-decoration:none;"><img border="0" src="" width="32" height="32" alt="fb"></a>  <a href="#" target="_blank" style="text-decoration:none;"><img border="0" src="" width="32" height="32" alt="tw"></a>  <a href="#" target="_blank" style="text-decoration:none;"><img border="0" src="" width="32" height="32" alt="vk"></a>  <a href="#" target="_blank" style="text-decoration:none;"><img border="0" src="" width="32" height="32" alt="vk"></a> </td> </tr> </table> 

यहां हमारे पास चार सोशल मीडिया आइकन हैं। तो इस मामले में मोबाइल जीमेल इस प्लेट को अपनी पूरी चौड़ाई तक नहीं बढ़ाता है। वह तालिका के अंदर आइकन द्वारा व्याप्त अंतरिक्ष के आकार में इसे चौड़ाई में बना देगा।

अच्छा कैसे करें? बहुत सरल है। इस तरह के रबर सामग्री के ब्लॉक के साथ सामाजिक माउस के ब्लॉक को मिलाएं

 <table class="wrapper" bgcolor="#eeeeee" width="600" cellpadding="20" cellspacing="0" style="border-collapse:collapse;"> <tr> <td><img src="1450828071767932483708" width="100%"></td> </tr> <tr> <td> <table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> <tr> <td bgcolor="#cccccc" align="center"> <a href="#" target="_blank" style="text-decoration:none;"><img border="0" src="" width="32" height="32" alt="fb"></a>  <a href="#" target="_blank" style="text-decoration:none;"><img border="0" src="" width="32" height="32" alt="tw"></a>  <a href="#" target="_blank" style="text-decoration:none;"><img border="0" src="" width="32" height="32" alt="vk"></a>  <a href="#" target="_blank" style="text-decoration:none;"><img border="0" src="" width="32" height="32" alt="vk"></a> </td> </tr> </table> </td> </tr> </table> 

मैं संक्षेप में बताता हूं

- आप रैपर के लिए निश्चित मान सेट कर सकते हैं, जीमेल खुद डिवाइस स्क्रीन के लिए रैपर को समायोजित करेगा
- रैपर के अंदर के तत्वों के लिए, प्रतिशत मान या निश्चित सेट करें, लेकिन चौड़ाई में 320px से अधिक नहीं।
- हम केवल जीमेल क्लाइंट में अलग-अलग स्क्रीन रिज़ॉल्यूशन के लिए अलग-अलग डिस्प्ले स्टाइल निर्दिष्ट नहीं कर सकते।

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