0

我一直在阅读,我似乎无法找到一种方法来让我的 html 电子邮件验证电子邮件在媒体查询正常工作的情况下发送出去,我通篇阅读了它只能使用 MailChimp 或 CampaignMonitor 等邮件服务来完成。这是真的?或者我可以使用一个mail()函数来发送它并考虑到响应。这是我到目前为止得到的,请记住,这是我购买的模板,只是为了让自己继续前进。

很抱歉弄得一团糟,但我想确保我准确地发布它。这是一个可怕的内容填充示例模板,我提前道歉。

        $subject = 'Account Activation';
        $message = '
        <html>
            <head>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
            <title>Responsive Minimalist Email Tempate - Rolas Layout1 Orange</title>
            <style type="text/css">
            html
            {
                width: 100%;
            }

            body {
               background-color: #f8f8f8;
               margin: 0;
               padding: 0;
            }

            .ReadMsgBody
            {
                width: 100%;
                background-color: #f8f8f8;
            }
            .ExternalClass
            {
                width: 100%;
                background-color: #f8f8f8;
            }



            p, div {
                margin: 0;
            }
            table {
                border-collapse: collapse;
            }

            @media screen and (max-width: 640px)  {
                body{width:auto !important;}

                table table{width:100%!important; }

                table[class="table-660"] {width: 460px !important; }

                img[class="img-660"] {width: 460px !important;  line-height: 0 !important;}
                img[class="img-radius"] {width: 460px !important; height: 10px !important; line-height: 0 !important;}

                td[class="one-half-first"] {width: 400px !important; display: block !important; text-align: center !important; padding-bottom: 0px !important; padding-right: 30px !important;}
                td[class="one-half-last"] {width: 400px !important; display: block !important; text-align: center !important; padding-left: 30px !important;}

                td[class="one-half-icon-first"] {width: 400px !important; display: block !important; text-align: left !important; padding-bottom: 0px !important; padding-right: 30px !important;}
                td[class="one-half-icon-last"] {width: 400px !important; display: block !important; text-align: left !important; padding-left: 30px !important;}

                td[class="one-third"] {width: 400px !important;  display: block !important; text-align: center !important; padding-bottom: 10px !important; padding-right: 30px !important;}
                td[class="one-third-middle"] {width: 400px !important; display: block !important; text-align: center !important; padding-bottom: 10px !important; padding-left: 30px !important; padding-right: 30px !important;}
                td[class="one-third-last"] {width: 400px !important; display: block !important; text-align: center; padding-left: 30px !important; }
                img[class="pro-img-180"] {width: 400px !important;}


                td[class="one-fourth-right"] {width: 150px !important; text-align: left !important; padding-bottom: 0px !important;}
                td[class="three-fourth-left"] {width: 250px !important; text-align: left !important; padding-bottom: 0px !important;}
                td[class="three-fourth-left-last"] {width: 250px !important; text-align: left !important; padding-bottom: 40px !important;}
                td[class="one-fourth-right-last"] {width: 150px !important;  text-align: left !important; padding-bottom: 40px !important;}
                img[class="img-180"] {width: 150px !important;}

                td[class="one-fourth-left"] {width: 150px !important; text-align: left !important; padding-bottom: 0px !important;}
                td[class="three-fourth-right"] {width: 250px !important; text-align: left !important; padding-bottom: 0px !important;}
                td[class="three-fourth-right-last"] {width: 250px !important; text-align: left !important; padding-bottom: 40px !important;}
                td[class="one-fourth-left-last"] {width: 150px !important;  text-align: left !important; padding-bottom: 40px !important;}
                img[class="img-180"] {width: 150px !important;}

                img[class="img-285"] {width: 400px !important; text-align: center !important;}

                table[class="left-content"] {width: 220px !important; text-align: left !important; }
                td[class="left-content"] {width: 220px !important; text-align: left !important; }
                img[class="img-blog"] {width: 220px !important;}
                img[class="divider-350"] {width: 220px !important; height:1px !important}

                table[class="right-sidebar"] {width: 150px !important;  text-align: left !important; }
                td[class="right-sidebar"] {width: 150px !important; text-align: left !important; }
                img[class="img-gallery"] {width: 110px !important;}
                img[class="divider-220"] {width: 150px !important; height:2px !important}

                table[class="right-content"] {width: 220px !important; text-align: left !important; }
                td[class="right-content"] {width: 220px !important; text-align: left !important; }
                img[class="img-blog"] {width: 220px !important;}
                img[class="divider-350"] {width: 220px !important; height:1px !important}

                table[class="left-sidebar"] {width: 150px !important; text-align: left !important; }
                td[class="left-sidebar"] {width: 150px !important; text-align: left !important; }
                img[class="img-gallery"] {width: 110px !important;}
                img[class="divider-220"] {width: 150px !important; height:2px !important}
            }

            @media screen and (max-width: 568px)  {
                body{width:auto !important;}

                table table{width:100%!important; }

                table[class="table-660"] {width: 460px !important; }

                img[class="img-660"] {width: 460px !important;  line-height: 0 !important;}
                img[class="img-radius"] {width: 460px !important; height: 10px !important; line-height: 0 !important;}

                td[class="one-half-first"] {width: 400px !important; display: block !important; text-align: center !important; padding-bottom: 0px !important; padding-right: 30px !important;}
                td[class="one-half-last"] {width: 400px !important; display: block !important; text-align: center !important; padding-left: 30px !important;}

                td[class="one-half-icon-first"] {width: 400px !important; display: block !important; text-align: left !important; padding-bottom: 0px !important; padding-right: 30px !important;}
                td[class="one-half-icon-last"] {width: 400px !important; display: block !important; text-align: left !important; padding-left: 30px !important;}

                td[class="one-third"] {width: 400px !important;  display: block !important; text-align: center !important; padding-bottom: 10px !important; padding-right: 30px !important;}
                td[class="one-third-middle"] {width: 400px !important; display: block !important; text-align: center !important; padding-bottom: 10px !important; padding-left: 30px !important; padding-right: 30px !important;}
                td[class="one-third-last"] {width: 400px !important; display: block !important; text-align: center; padding-left: 30px !important; }
                img[class="pro-img-180"] {width: 400px !important;}


                td[class="one-fourth-right"] {width: 150px !important; text-align: left !important; padding-bottom: 0px !important;}
                td[class="three-fourth-left"] {width: 250px !important; text-align: left !important; padding-bottom: 0px !important;}
                td[class="three-fourth-left-last"] {width: 250px !important; text-align: left !important; padding-bottom: 40px !important;}
                td[class="one-fourth-right-last"] {width: 150px !important;  text-align: left !important; padding-bottom: 40px !important;}
                img[class="img-180"] {width: 150px !important;}

                td[class="one-fourth-left"] {width: 150px !important; text-align: left !important; padding-bottom: 0px !important;}
                td[class="three-fourth-right"] {width: 250px !important; text-align: left !important; padding-bottom: 0px !important;}
                td[class="three-fourth-right-last"] {width: 250px !important; text-align: left !important; padding-bottom: 40px !important;}
                td[class="one-fourth-left-last"] {width: 150px !important;  text-align: left !important; padding-bottom: 40px !important;}
                img[class="img-180"] {width: 150px !important;}

                img[class="img-285"] {width: 400px !important; text-align: center !important;}

                table[class="left-content"] {width: 220px !important; text-align: left !important; }
                td[class="left-content"] {width: 220px !important; text-align: left !important; }
                img[class="img-blog"] {width: 220px !important;}
                img[class="divider-350"] {width: 220px !important; height:1px !important}

                table[class="right-sidebar"] {width: 150px !important;  text-align: left !important; }
                td[class="right-sidebar"] {width: 150px !important; text-align: left !important; }
                img[class="img-gallery"] {width: 110px !important;}
                img[class="divider-220"] {width: 150px !important; height:2px !important}

                table[class="right-content"] {width: 220px !important; text-align: left !important; }
                td[class="right-content"] {width: 220px !important; text-align: left !important; }
                img[class="img-blog"] {width: 220px !important;}
                img[class="divider-350"] {width: 220px !important; height:1px !important}

                table[class="left-sidebar"] {width: 150px !important; text-align: left !important; }
                td[class="left-sidebar"] {width: 150px !important; text-align: left !important; }
                img[class="img-gallery"] {width: 110px !important;}
                img[class="divider-220"] {width: 150px !important; height:2px !important}
            }

            @media screen and (max-width: 479px)  {
                body{width:auto !important;}

                table table{width:100%!important; }

                table[class="table-660"] {width: 300px !important; }

                td[class="logo"] {width: 240px !important; display: block !important; padding-bottom: 0px !important;}
                td[class="social"] {width: 240px !important; display: block !important; }

                img[class="img-660"] {width: 300px !important;  line-height: 0 !important;}
                img[class="img-radius"] {width: 300px !important; height: 10px !important; line-height: 0 !important;}

                td[class="one-half-first"] {width: 240px !important; display: block !important; text-align: center !important; padding-bottom: 0px !important; padding-right: 30px !important;}
                td[class="one-half-last"] {width: 240px !important; display: block !important; text-align: center !important; padding-left: 30px !important;}

                td[class="one-half-icon-first"] {width: 240px !important; display: block !important; text-align: left !important; padding-bottom: 0px !important; padding-right: 30px !important;}
                td[class="one-half-icon-last"] {width: 240px !important; display: block !important; text-align: left !important; padding-left: 30px !important;}

                td[class="one-third"] {width: 240px !important; display: block !important; text-align: center; padding-bottom: 10px !important; padding-right: 30px !important;}
                td[class="one-third-middle"] {width: 240px !important; display: block !important; text-align: center; padding-bottom: 10px !important; padding-left: 30px !important; padding-right: 30px !important;}
                td[class="one-third-last"] {width: 240px !important; display: block !important; text-align: center; padding-left: 30px !important;}
                img[class="pro-img-180"] {width: 240px !important;}

                img[class="img-285"] {width: 240px !important; text-align: center !important;}

                td[class="three-fourth-left"] {width: 240px !important; display: block !important; text-align: center !important; padding-bottom: 0px !important; padding-right: 30px !important;}
                td[class="one-fourth-right"] {width: 240px !important; display: block !important; text-align: center !important; padding-bottom: 0px !important; padding-left: 30px !important;}
                td[class="three-fourth-left-last"] {width: 240px !important; display: block !important; text-align: center !important; padding-bottom: 0px !important; padding-right: 30px !important;}
                td[class="one-fourth-right-last"] {width: 240px !important; display: block !important; text-align: center !important; padding-bottom: 40px !important; padding-left: 30px !important;}
                img[class="img-180"] {width: 240px !important; text-align: center !important;}


                td[class="one-fourth-left"] {width: 240px !important; display: block !important; text-align: left !important; padding-bottom: 0px !important;}
                td[class="three-fourth-right"] {width: 240px !important; display: block !important; text-align: left !important; padding-bottom: 0px !important; padding-left: 30px !important;}
                td[class="three-fourth-right-last"] {width: 240px !important; display: block !important; text-align: left !important; padding-bottom: 40px !important; padding-left: 30px !important;}
                td[class="one-fourth-left-last"] {width: 240px !important; display: block !important;  text-align: left !important; padding-bottom: 40px !important;}
                img[class="img-180"] {width: 240px !important;display: block !important; }


                table[class="left-content"] {width: 240px !important; margin: 0;  text-align: left !important; padding-bottom: 40px !important;  display: block !important;}
                td[class="left-content"] {width: 240px !important; margin: 0; text-align: left !important; display: block !important; }
                img[class="img-blog"] {width: 240px !important; display: block !important;}
                img[class="divider-350"] {width: 240px !important; height:1px !important display: block !important;}

                table[class="right-sidebar"] {width: 240px !important; text-align: center !important;  display: block !important; }
                table[class="right-sidebar-last"] {width: 240px !important; text-align: center !important; margin-bottom: 40px !important; display: block !important; }
                td[class="right-sidebar"] {width: 240px !important; text-align: left !important; display: block !important; }
                img[class="img-gallery"] {width: 200px !important; display: block !important;}
                img[class="divider-220"] {width: 240px !important; height:2px !important display: block !important;}

                table[class="right-content"] {width: 240px !important; margin: 0 !important;  text-align: right !important; padding-left: 30px !important; padding-bottom: 40px !important; display: block !important;}
                td[class="right-content"] {width: 240px !important; margin: 0 !important; text-align: left !important; display: block !important; }
                img[class="img-blog"] {width: 240px !important; display: block !important;}
                img[class="divider-350"] {width: 240px !important; height:1px !important display: block !important;}

                table[class="left-sidebar"] {width: 240px !important; text-align: center !important;  display: block !important; }
                table[class="left-sidebar-last"] {width: 240px !important;  text-align: center !important; margin-bottom: 40px !important; display: block !important; }
                td[class="left-sidebar"] {width: 240px !important; text-align: left !important; display: block !important; }
                img[class="img-gallery"] {width: 200px !important; display: block !important;}
                img[class="divider-220"] {width: 240px !important; height:2px !important display: block !important;}


                td[class="footer-left"] {width: 240px !important; display: block !important; text-align: center !important; padding-bottom: 0px !important;}
                td[class="footer-right"] {width: 240px !important; display: block !important; text-align: center !important; }
            }

            </style>
            </head>
            <body bgcolor="#f8f8f8">
            <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#f8f8f8">
                <tr>
                    <td align="center">
                        <table class="table-660" width="660" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#f8f8f8" style="padding:0; margin: 0; ">
                            <tr>
                                <td bgcolor="#f8f8f8" align="left" style="padding: 30px 0px 10px 0px; font-size:12px ; font-family: Helvetica, Arial, sans-serif; line-height: 22px; font-style: italic;">
                                    <span>
                                        <a class="top-link" href="#">View online</a>
                                        &nbsp;&nbsp;
                                        <a class="top-link" href="#">Forward to friends</a>
                                    </span>
                                </td>
                            </tr>
                        </table>
                        <table class="table-660" width="660" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="padding:0; margin: 0; ">
                            <tr>
                                <td class="logo" colspan="2" width="330" bgcolor="#ffffff" align="left" valign="top" style="padding: 30px; font-size:12px ; font-family: Helvetica, Arial, sans-serif; line-height: 22px; font-style: italic;">
                                    <span>
                                        <a href="#" style="color:#ffffff;">
                                        <img src="http://www.fruitfore.st/images/logo.jpg" alt="logo" />
                                        </a>
                                    </span>
                                </td>
                                <td class="social" colspan="2" width="330" bgcolor="#ffffff" align="right" valign="middle" style="padding: 30px; font-size:12px ; font-family: Helvetica, Arial, sans-serif; line-height: 22px; font-style: italic;">
                                    <span>
                                        <a href="#" style="color:#ffffff;">
                                            <img src="http://www.fruitfore.st/images/facebook.jpg" alt="facebook" border="0" />
                                        </a>
                                        &nbsp;
                                        <a href="#" style="color:#ffffff;">
                                            <img src="http://www.fruitfore.st/images/twitter.jpg" alt="twitter" border="0" />
                                        </a>
                                        &nbsp;
                                        <a href="#" style="color:#ffffff;">
                                            <img src="http://www.fruitfore.st/images/youtube.jpg" alt="youtube" border="0" />
                                        </a>
                                        &nbsp;
                                        <a href="#" style="color:#ffffff;">
                                            <img src="http://www.fruitfore.st/images/linkedin.jpg" alt="linkedin" border="0" />
                                        </a>
                                        &nbsp;
                                        <a href="#" style="color:#ff8b1d;">
                                            <img src="http://www.fruitfore.st/images/dribbble.jpg" alt="dribbble" border="0" />
                                        </a>
                                    </span>
                                </td>
                            </tr>
                        </table>
                        <table class="table-660" width="660" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ff8b1d" style="padding:0; margin: 0; ">
                            <tr>
                                <td width="660" bgcolor="#ff8b1d" align="left" valign="top" style="padding: 30px; font-size:32px ; font-family: Helvetica, Arial, sans-serif; line-height: 42px; color:#ffffff;">
                                    <span>
                                        Please click this link to activate your account. http://www.fruitfore.st/activateuser.php?usr=' . $username . '&token=' . $token . '
                                    </span>
                                </td>
                            </tr>
                        </table>
                        <table class="table-660" width="660" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ff8b1d" style="padding:0; margin: 0; ">
                            <tr>
                                <td width="660" bgcolor="#ff8b1d" align="center" style="padding: 0; font-size:32px ; font-family: Helvetica, Arial, sans-serif; line-height: 0 !important; color:#ffffff; text-transform: uppercase;">
                                    <a href="#" style="color:#ffffff;">
                                        <img class="img-660" src="http://www.fruitfore.st/images/featured-image.jpg" alt="featured-image" border="0" />
                                    </a>
                                </td>
                            </tr>
                        </table>
                        <table class="table-660" width="660" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="padding:0; margin: 0; ">
                            <tr>
                                <td width="660" bgcolor="#ffffff" align="left" style="padding: 40px 30px ; font-size:16px ; font-family: Helvetica, Arial, sans-serif; line-height: 26px; color:#aaaaaa; ">
                                    <p>
                                        Hello, we are happy to announce our latest services features of <span style="background:#fff7a8; font-style: italic;">Rolas theme</span>.
                                        Ut quas omnes animal his. Ei vis esse consetetur repudiandae, duo ad
            ullum eligendi. Saepe utinam intellegebat mei ad <a href="#">read on</a>
                                    </p>
                                </td>
                            </tr>
                        </table>
                        <table class="table-660" width="660" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="padding:0; margin: 0; ">
                            <tr>
                                <td width="660" bgcolor="#ffffff" align="center" style="padding: 0px; ">
                                    <span>
                                        <img class="img-660" src="http://www.fruitfore.st/images/divider-660.jpg" alt="divider-660" border="0" />
                                    </span>
                                </td>
                            </tr>
                        </table>
                        <table class="table-660" width="660" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="padding:0; margin: 0; ">
                            <tr>
                                <td class="one-half-first" colspan="2" width="285" bgcolor="#ffffff" align="left" valign="top" style="padding: 40px 30px 45px 30px; font-size:14px ; font-family: Helvetica, Arial, sans-serif; line-height: 24px;  color:#aaaaaa;">
                                    <p>
                                        <a href="#" style="color:#ffffff;">
                                        <img class="img-285" src="http://www.fruitfore.st/images/img-285-180-1.jpg" alt="img-285-180-1" border="0" />
                                        </a>
                                    </p>
                                </td>
                                <td class="one-half-last" colspan="2" width="285" bgcolor="#ffffff" align="left" valign="top" style="padding:  40px 30px 45px 0px; font-size:14px ; font-family: Helvetica, Arial, sans-serif; line-height: 24px; color:#aaaaaa;">
                                    <p style="font-size: 20px; line-height: 30px; color:#818181; text-transform: uppercase;">
                                        mobile devices friendly
                                    </p>

                                    <p>
                                        Lorem ipsum dolor sit amet, adipiscing elit. Nulla fringilla auctor sem, sit amet tristique odio dictum quis neque diam, ornare ac blandit consequat, ultrices nec justo.
                                    </p>
                                    <br />

                                    <p>
                                        <a href="#" style="color:#ffffff; text-transform: uppercase; background:#ff8b1d; font-style: normal; border-top: 10px solid #ff8b1d; border-right: 15px solid #ff8b1d; border-bottom: 10px solid #ff8b1d; border-left: 15px solid #ff8b1d;">
                                        coded button
                                        </a>
                                    </p>
                                </td>
                            </tr>
                        </table>
                        <table class="table-660" width="660" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="padding:0; margin: 0; ">
                            <tr>
                                <td width="660" bgcolor="#ffffff" align="center" style="padding: 0px; ">
                                    <span>
                                        <img class="img-660" src="http://www.fruitfore.st/images/divider-660.jpg" alt="divider-660" border="0" />
                                    </span>
                                </td>
                            </tr>
                        </table>
                        <table class="table-660" width="660" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="padding:0; margin: 0; ">
                            <tr>

                                <td class="one-half-first" colspan="2" width="285" bgcolor="#ffffff" align="left" valign="top" style="padding: 40px 30px 45px 30px; font-size:14px ; font-family: Helvetica, Arial, sans-serif; line-height: 24px;  color:#aaaaaa;">
                                    <p style="font-size: 20px; line-height: 30px; color:#818181; text-transform: uppercase;">
                                        repeatable modules
                                    </p>

                                    <p>
                                        Lorem ipsum dolor sit amet, adipiscing elit. Nulla fringilla auctor sem, sit amet tristique odio dictum quis neque diam, ornare ac blandit consequat, ultrices nec justo.
                                    </p>
                                    <br />

                                    <p>
                                        <a href="#" style="color:#ffffff; text-transform: uppercase; background:#ff8b1d; font-style: normal; border-top: 10px solid #ff8b1d; border-right: 15px solid #ff8b1d; border-bottom: 10px solid #ff8b1d; border-left: 15px solid #ff8b1d;">
                                        read more here
                                        </a>
                                    </p>
                                </td>
                                <td class="one-half-last" colspan="2" width="285" bgcolor="#ffffff" align="left" valign="top" style="padding:  40px 30px 45px 0px; font-size:14px ; font-family: Helvetica, Arial, sans-serif; line-height: 24px; color:#aaaaaa;">
                                    <span>
                                        <a href="#" style="color:#ffffff;">
                                        <img class="img-285" src="http://www.fruitfore.st/images/img-285-180-2.jpg" alt="img-285-180-1" border="0" />
                                        </a>
                                    </span>
                                </td>
                            </tr>
                        </table>
                        <table class="table-660" width="660" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="padding:0; margin: 0; ">
                            <tr>
                                <td width="660" bgcolor="#ffffff" align="center" style="padding: 0px; ">
                                    <span>
                                        <img class="img-660" src="http://www.fruitfore.st/images/divider-660.jpg" alt="divider-660" border="0" />
                                    </span>
                                </td>
                            </tr>
                        </table>
                        <table class="table-660" width="660" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="padding:0; margin: 0; ">
                            <tr>
                                <td class="one-half-first" colspan="2" width="285" bgcolor="#ffffff" align="left" valign="top" style="padding: 40px 30px 40px 30px; font-size:14px ; font-family: Helvetica, Arial, sans-serif; line-height: 24px;  color:#aaaaaa;">
                                    <span>
                                        <a href="#" style="color:#ffffff;">
                                        <img class="img-285" src="http://www.fruitfore.st/images/img-285-180-3.jpg" alt="img-285-180-1" border="0" />
                                        </a>
                                    </span>
                                </td>
                                <td class="one-half-last" colspan="2" width="285" bgcolor="#ffffff" align="left" valign="top" style="padding: 40px 30px 40px 0px; font-size:14px ; font-family: Helvetica, Arial, sans-serif; line-height: 24px; color:#aaaaaa;">
                                    <p style="font-size: 20px; line-height: 30px; color:#818181; text-transform: uppercase;">
                                        very easy to use
                                    </p>

                                    <p>
                                        Lorem ipsum dolor sit amet, adipiscing elit. Nulla fringilla auctor sem, sit amet tristique odio dictum quis neque diam, ornare ac blandit consequat, ultrices nec justo.
                                    </p>
                                    <br />

                                    <p>
                                        <a href="#" style="color:#ffffff; text-transform: uppercase; background:#ff8b1d; font-style: normal; border-top: 10px solid #ff8b1d; border-right: 15px solid #ff8b1d; border-bottom: 10px solid #ff8b1d; border-left: 15px solid #ff8b1d;">
                                        coded button
                                        </a>
                                    </p>
                                </td>
                            </tr>
                        </table>
                        <table class="table-660" width="660" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="padding:0; margin: 0; ">
                            <tr>
                                <td width="660" bgcolor="#ffffff" align="center" style="padding: 0px; ">
                                    <span>
                                        <img class="img-660" src="http://www.fruitfore.st/images/divider-660.jpg" alt="divider-660" border="0" />
                                    </span>
                                </td>
                            </tr>
                        </table>
                        <table class="table-660" width="660" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="padding:0; margin: 0; ">
                            <tr>
                                <td colspan="2" width="660" bgcolor="#ffffff" align="center" valign="top" style="padding: 40px 30px 45px 30px ; font-size:20px ; font-family: Helvetica, Arial, sans-serif; line-height: 30px; color:#aaaaaa;">
                                    <p style="font-size: 20px; line-height: 30px; color:#818181; text-transform: uppercase;">
                                        what are you waiting for? hit the button below and get yours soon!
                                    </p>

                                    <br />

                                    <p>
                                        <a href="#" style="color:#ffffff; text-transform: uppercase; background:#ff8b1d; font-style: normal; border-top: 10px solid #ff8b1d; border-right: 15px solid #ff8b1d; border-bottom: 10px solid #ff8b1d; border-left: 15px solid #ff8b1d;">
                                        download now
                                        </a>
                                    </p>
                                </td>
                            </tr>
                        </table>
                        <table class="table-660" width="660" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ececec" style="padding:0; margin: 0; ">
                            <tr>
                                <td class="footer-left" colspan="2" width="430" bgcolor="#ececec" align="left" valign="top" style="padding: 30px 15px 20px 30px; font-size:12px ; font-family: Helvetica, Arial, sans-serif; line-height: 14px; font-style: italic; color:#aaaaaa;">
                                    <p>
                                    You are receiving this email because you subscribed in at <a href="#">yoursite.com</a> to getting some special news, promotions, freebies.
                                    Click here to <a href="#">unsubscribe</a> :(
                                    </p>
                                    <br />
                                    <p>
                                    Our mailing address is: <a href="#">yoursite.com</a>, P.O. Box 264, London, UK 57378
                                    </p>
                                </td>
                                <td class="footer-right" colspan="2" width="200" bgcolor="#ececec" align="left" valign="top" style="padding:  30px 30px 20px 15px;  font-size:12px ; font-family: Helvetica, Arial, sans-serif; line-height: 14px; font-style: italic; color:#aaaaaa;">
                                    <p>
                                        Copyright 2013 <a href="#">yourwebsite.com</a> all right reserved.
                                    </p>
                                </td>
                            </tr>
                        </table>
                        <table class="tablbe-660" width="660" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#f8f8f8" style="padding:0; margin: 0; ">
                            <tr>
                                <td width="660" bgcolor="#f8f8f8" align="center" style="padding-bottom: 30px; line-height: 0 !important;">
                                    <span>
                                        <img class="img-radius" src="http://www.fruitfore.st/images/image-radius.jpg" alt="image radius" border="0" />
                                    </span>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </body>
    </html>'
    ;
        $headers  = 'MIME-Version: 1.0' . "\r\n";
        $headers .= 'Content-type: text/html; charset=UTF-8' . "\r\n";
        // Additional headers
        $headers .= 'From: FruitFore.st <welcome@fruitfore.st>' . "\r\n";
        mail($email, $subject, $message, $headers);
4

1 回答 1

1

是的,媒体查询将通过 php 工作mail()。但是,并非所有电子邮件客户端都支持 CSS 媒体查询,请参阅本文了解更多详细信息http://www.emailonacid.com/blog/details/C13/media_queries_in_html_emails

于 2013-04-21T10:00:54.667 回答