email
हाइब्रिड ईमेल कोडिंग
खोज…
परिचय
जब कोई ईमेल क्लाइंट media-queries समर्थन नहीं करता है, तो मीडिया क्वेरी समर्थन की परवाह किए बिना ईमेल क्लाइंट के लिए विभिन्न स्क्रीन आकारों के लेआउट को फिर से कॉन्फ़िगर करने के लिए एक हाइब्रिड दृष्टिकोण का उपयोग किया जा सकता है। यह कठोर आधारभूतियों (कुछ आंदोलन की अनुमति) लगाने के लिए द्रव तालिकाओं और अधिकतम-चौड़ाई और न्यूनतम-चौड़ाई का उपयोग करता है और आउटलुक के लिए एक निश्चित, व्यापक चौड़ाई लगाता है जो वैसे भी डेस्कटॉप के लिए जर्जर हो जाता है। मोबाइल फ्रेंडली बेसलाइन सेट हो जाने के बाद, मीडिया क्वेश्चन ईमेल को आगे बढ़ाने वाले क्लाइंट्स में उत्तरोत्तर वृद्धि करते हैं।
एकल स्तंभ, द्रव लेआउट
हाइब्रिड कोडिंग का मूल सेटअप एक एकल, द्रव स्तंभ है। चूंकि अधिकांश ईमेल क्लाइंट max-width समर्थन करते हैं, इसलिए हम <table> की चौड़ाई को 100% (द्रव) सेट करने के लिए उपयोग कर सकते हैं, लेकिन अधिकतम चौड़ाई (इस मामले में 660px ) से अधिक नहीं। जैसे वेब पर।
हालाँकि, Windows डेस्कटॉप Microsoft max-width समर्थन नहीं करता है और इस तालिका को 100% चौड़ाई पर प्रस्तुत करेगा, इसलिए हम " भूत तालिका " को सेट करने के लिए Microsoft सशर्त टैग का उपयोग करते हैं जो <table> 660px की कठिन चौड़ाई 660px । Windows डेस्कटॉप Microsoft केवल डेस्कटॉप है, इसलिए इसे छोटे आकार में द्रवित करने की आवश्यकता नहीं है। और चूंकि Windows डेस्कटॉप Microsoft एकमात्र ईमेल क्लाइंट है जो इन Microsoft सशर्त टैगों का समर्थन करता है, कोई भी अन्य ग्राहक अनजाने में 660px डेस्कटॉप चौड़ाई के लिए बाध्य नहीं होगा।
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="">
<tr>
<td align="center" height="100%" valign="top" width="100%">
<!--[if mso]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="660">
<tr>
<td align="center" valign="top" width="660">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:660px;">
<tr>
<td align="center" valign="top">
<p>Content Goes Here.</p>
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>