0

无论出于何种原因，我的文本大小调整在 iPhone 上无法正常工作，在 android 和其他电子邮件格式上也能正常工作。似乎看不出这两个文件之间有任何区别。图像也会调整大小，似乎只是文本的问题。

<head>


<style type="text/css">
    /* Outlook link fix */
    #outlook a {padding:0;}
    /* Hotmail background & line height fixes */
    .ExternalClass {width:100% !important;}
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font,
    .ExternalClass td, .ExternalClass div {line-height: 100%;}
    /* Image borders & formatting */
    img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;} 
    a img {border:none;} 
    /* Re-style iPhone automatic links (eg. phone numbers) */
    .applelinks a {color:#222222; text-decoration: none;}
    /* Hotmail symbol fix for mobile devices */
    .ExternalClass img[class^=Emoji] { width: 10px !important; height: 10px !important; display: inline !important; } 


    /* Media Query for mobile */

    @media screen and (max-width: 480px) {  

    /* This resizes tables and images to be 100% wide with a proportionate width */
    table[class=emailwrapto100pc], img[class=emailwrapto100pc]{width:100% !important; height:auto !important;}

    /* Hide stuff on mobiles */
    table[class=emailnomob],td[class=emailnomob],img[class=emailnomob],span[class=emailnomob]{display:none !important;}

    td[class=emailcolsplit]{width:100%!important; float:left!important;}

    a[class=emailmobbutton]{display:block !important;font-size:14px !important; font-weight:bold !important; padding:6px 4px 8px 4px !important; line-height:18px !important; background:#dddddd !important; margin:10px auto;width:100%; text-align:center; color:#111 !important; text-decoration:none; text-shadow:#fff 1px 0 0 ;}

    /* This resizes body text for mobiles */
    span[class=emailbodytext],a[class=emailbodytext]{font-size:16px !important; line-height:21px !important;}
    }

    @media screen and (min-width:1024px) {
    a[class=emailmobbutton]{display: none !important;}
    span[class=emailmobbutton]{display: none !important;}
    }


                    <table style="padding-top:20px;" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td>
                            <a href="" target="_blank">
                            <img height="216" width="216" border="0" src="" style="display: block;" class="emailwrapto100pc" />
                            </a>
                        </td>
                    </tr>
                    <tr>    
                        <td align="center" style="padding-top:10px;padding-left:10px;padding-right:10px;">
                            <a href="" style="text-decoration: none; color: #111111">               
                            <span class="emailbodytext" style="font-size:12px; font-family:tahoma, sans-serif; line-height:20px; color:#333333;">Hugo Boss Black</span>
                        </a>
                        </td>
                    </tr>
                    <tr>
                        <td width="33%" align="center" style="padding-top:5px;padding-bottom:10px;padding-left:10px;padding-right:10px;">
                            <a href="" style="text-decoration: none; color: #111111">
                            <span class="emailbodytext" style="font-size:12px; font-family:tahoma, sans-serif; line-height:20px; color:#333333;">Bugnara Polo T-Shirt</span>
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td align="center" width="33%">
                        <a style="text-decoration:none;background-color:#000000; color:#ffffff; padding:5px 20px; font-family:tahoma, sans-serif;font-size:12px;line-height:20px;" href="">
                            SHOP NOW</a>
                        </td>
                    </tr>
                </table>

任何帮助将不胜感激。

4

1 回答 1

0

我遇到了一个问题，我正在与不允许修改 <head> 部分的电子邮件提供商合作，并且我的一个 <style> @media ...</style>代码不起作用。

对于电子邮件，我们必须及时回想而不是向前推进。尝试将媒体查询编写为单独的块部分。我已经尝试过这种方法，它在 Android 上运行顺利，之前的方法失败了。

`<style type="text/css">
/* standard styles */
</style>
<style media="screen and (max-width: 480px)">
/* responsive styles */
</style>`

希望这可以帮助你。

于 2013-11-29T23:16:28.197 回答