媒体查询不适用于电子邮件

时间:2013-09-20 06:42:11

标签: css responsive-design media-queries

我尝试过这么多媒体查询试图让它在iPhone(横向/纵向)和桌面上运行,但我似乎无法同时在两者上正常工作。

我的一些班级正在运作,但有些班级没有。

有人可以看看并告诉我,如果我使用正确的查询电子邮件爆炸。 当视口改变时,类.office也不会改变,而其他类则改变!

http://jsfiddle.net/chrishowell/qJhu6/

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <title>Sunland Group</title>
    <meta property="og:title" content="*|MC:SUBJECT|*" />
    <style type="text/css">
        @import url("http://fast.fonts.net/t/1.css?apiType=css&projectid=b075256d-62bd-45e3-843f-a9480a19a546");
        @font-face {
            font-family:"SackersGothicW01-Light";
            src:url("http://sunlandgroup.com.au/auto-response/Fonts/4a1690e1-e4c5-4644-bd72-2fdc50d48e44.eot?#iefix");
            src:url("http://sunlandgroup.com.au/auto-response/Fonts/4a1690e1-e4c5-4644-bd72-2fdc50d48e44.eot?#iefix") format("eot"), url("http://sunlandgroup.com.au/auto-response/Fonts/558e1882-61fa-42c9-b946-2ff0b251d89e.woff") format("woff"), url("Fonts/51d279cf-7422-4166-bea9-d5890c7b255a.ttf") format("truetype"), url("http://sunlandgroup.com.au/auto-response/Fonts/b3e01acf-acc5-4cc3-aef6-d05b5bf3e24a.svg#b3e01acf-acc5-4cc3-aef6-d05b5bf3e24a") format("svg");
        }
        @font-face {
            font-family:"Gill Sans W04 Book";
            src:url("http://sunlandgroup.com.au/auto-response/Fonts/c4be5717-c19c-43a5-9ad3-b548ddf070d4.eot?#iefix");
            src:url("http://sunlandgroup.com.au/auto-response/Fonts/c4be5717-c19c-43a5-9ad3-b548ddf070d4.eot?#iefix") format("eot"), url("http://sunlandgroup.com.au/auto-response/Fonts/63aa9f40-04be-453a-a672-aa8f9919115d.woff") format("woff"), url("Fonts/a82a5fb6-ad03-4675-801e-d3182a58ff5f.ttf") format("truetype"), url("http://sunlandgroup.com.au/auto-response/Fonts/beb2cee2-1a51-44ca-848f-4f795394ee5a.svg#beb2cee2-1a51-44ca-848f-4f795394ee5a") format("svg");
        }
        @font-face {
            font-family:'FontAwesome';
            src: url('http://sunlandgroup.com.au/auto-response/Fonts/fontawesome-webfont.eot?v=3.0.1');
            src: url('http://sunlandgroup.com.au/auto-response/Fonts/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'), url('http://sunlandgroup.com.au/auto-response/Fonts/fontawesome-webfont.woff?v=3.0.1') format('woff'), url('http://sunlandgroup.com.au/auto-response/Fonts/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
            font-weight: normal;
            font-style: normal;
        }
        /*  Font Awesome styles
------------------------------------------------------- */
        [class^="icon-"], [class*=" icon-"] {
            font-family: FontAwesome;
            font-weight: normal;
            font-style: normal;
            font-size: 10px;
            color: #a08a5e;
            text-decoration: inherit;
            -webkit-font-smoothing: antialiased;
            /* sprites.less reset */
            display: inline;
            width: auto;
            height: auto;
            line-height: normal;
            vertical-align: baseline;
            background-image: none;
            background-position: 0% 0%;
            background-repeat: repeat;
            margin-top: 0;
        }
        .ReadMsgBody {
            width:100%;
            background-color:#ffffff;
        }
        .ExternalClass {
            width:100%;
            background-color:#ffffff;
        }
        body {
            width:100%;
            background-color:#070100;
            margin:0;
            padding:0;
            -webkit-font-smoothing:antialiased;
        }
        table {
            border-collapse: collapse;
        }
        a:link {
            color:#9b999b;
            text-decoration:none;
        }
        a:visited {
            color:#9b999b;
            text-decoration:none;
        }
        a:hover {
            color:#9b999b;
            text-decoration:none;
        }
        a:active {
            color:#9b999b;
            text-decoration:none;
        }
        .bg-black {
            background-color:#070100;
        }
        @media only screen and (max-width: 479px) {
            .office {
                font-size:8px !important
            }
            .location {
                width:5px !important
            }
            .headings {
                font-size:10px !important
            }
            .contacts {
                font-size:12px !important;
                line-height: 2 !important
            }
            .downloads {
                font-size:12px !important
            }
            .fonts-sm {
                font-size:8px !important
            }
            img {
                display:block !important
            }
            .float-l {
                float:left !important
            }
            .phone {
                font-size:22px !important;
                color: #a08a5e;
                line-height: 2 !important
            }
            .deviceWidth {
                width:100% !important;
            }
        }
        @media only screen and (max-width: 620px) {
            .office {
                font-size:10px !important;
                color: aqua !important;
            }
            body[yahoo] .downloads {
                font-size:15px !important
            }
            .fonts-sm {
                font-size:10px !important
            }
            .float-l {
                float:left !important
            }
            img {
                display:block !important
            }
            .deviceWidth {
                max-width:600px !important;
            }
        }
    </style>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" yahoo="fix" style="color:#333333; background:#ffffff; font-family:'Gill Sans W04 Book',Arial,Helvetica,sans-serif;" text="#333333" ;>
    <div style="background-color:#070100;">
        <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="3px">
            <tr>
                <td valign="top" align="left">
                    <table class="deviceWidth" border="1px" cellpadding="0" cellspacing="0" align="center" bgcolor="#070100" BORDERCOLOR="RED">
                        <tr>
                            <!------------------------------>
                            <!--! TableSide-->
                            <!------------------------------>
                            <td width="5%">
                                <img src="http://sunlandgroup.com.au/auto-response/images/images/blank-gif.gif" alt="" height="1" width="1">
                            </td>
                            <!------------------------------>
                            <!--! Table Main-->
                            <!------------------------------>
                            <td width="90%" valign="top">
                                <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#070100">
                                    <tr>
                                        <td>
                                            <img src="http://sunlandgroup.com.au/auto-response/images/logo.gif" width="1000" height="600" alt="" border="0" style="width:100%; height:auto; display:block">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="color:#a08a5e; text-transform:uppercase; line-height:1.4; font-size:16px;text-align:center; font-family:'SackersGothicW01-Light', Helvetica, Arial, Sans-Serif;"><span class="headings">THANK YOU {!lead.FirstName} {!lead.LastName}</span>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td height="120">
                                            <img src="http://sunlandgroup.com.au/auto-response/images/images/blank-gif.gif" alt="" height="1" width="1">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left" valign="top">
                                            <img src="http://sunlandgroup.com.au/auto-response/images/peninsula_hero.jpg" width="1000" height="625" alt="" border="0" style="width:100%; height:auto; display:block">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td height="120">
                                            <img src="http://sunlandgroup.com.au/auto-response/images/images/blank-gif.gif" alt="" height="1" width="1">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="color:#a08a5e; font-size:16px;text-align:center; font-family:'SackersGothicW01-Light', Helvetica, Arial, Sans-Serif;"><span class="headings">FOR A PERSONAL VIEWING</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td height="20">
                                            <img src="http://sunlandgroup.com.au/auto-response/images/images/blank-gif.gif" alt="" height="1" width="1">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="color:#f7f2ec; font-size:15px; text-align:center; font-family:'Gill Sans W04 Book',Arial, Helvetica, sans-serif;"><span class="contacts">CONTACT</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="color:#f7f2ec; font-size:15px;text-align:center;font-family:'Gill Sans W04 Book',Arial, Helvetica, sans-serif;"><span class="contacts">CAMERON BUCHANAN</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="color:#f7f2ec; font-size:15px;text-align:center; font-family:'Gill Sans W04 Book',Arial, Helvetica, sans-serif;"><a href="tel:0414791811" style="color:#f7f2ec; text-decoration:none"><span class="phone">0414 791 811</span></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="color:#f7f2ec; font-size:15px; text-align:center; font-family:'Gill Sans W04 Book',Arial, Helvetica, sans-serif;"><a href="mailto:cbuchanan@sunlandgroup.com.au" style="color:#ffffff; text-decoration:none"><span class="contacts">cbuchanan@sunlandgroup.com.au</span></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td height="120">
                                            <img src="http://sunlandgroup.com.au/auto-response/images/images/blank-gif.gif" alt="" height="1" width="1">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left" valign="top">
                                            <img src="http://sunlandgroup.com.au/auto-response/images/line.gif" width="1000" height="3" alt="" border="0" style="width:100%; height:auto; display:block">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left" valign="top">
                                            <img src="http://sunlandgroup.com.au/auto-response/images/peninsula.png" width="1000" height="626" alt="" border="0" style="width:100%; height:auto; display:block">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left" valign="top">
                                            <img src="http://sunlandgroup.com.au/auto-response/images/img_07.jpg" width="1000" height="623" alt="" border="0" style="width:100%; height:auto; display:block">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <img src="http://sunlandgroup.com.au/auto-response/images/img_08.gif" width="1000" height="146" alt="" border="0" style="width:100%; height:auto; display:block">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style=" color:#a08a5e; text-align:center; letter-spacing: 0.1em; font-family:'SackersGothicW01-Light',Arial, Helvetica, sans-serif;line-height:1.2"><span class="headings">DOWNLOADS</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td height="20">
                                            <img src="http://sunlandgroup.com.au/auto-response/images/images/blank-gif.gif" alt="" height="1" width="1">
                                        </td>
                                    </tr>
                                    <table width="100%" border="1px solid #333">
                                        <tr>
                                            <td width="48%" align="right" style=" color:#9b999b; font-family:'Gill Sans W04 Book',Arial, Helvetica, sans-serif"> <a href="#" alt="LOCATION">

                                <i class="icon-">&#xf078;</i></span>
                                <span class="downloads">LOCATION MAP</span></a>
                                            </td>
                                            <td width="4%"></td>
                                            <td width="48%" style=" color:#9b999b; font-family:'Gill Sans W04 Book',Arial, Helvetica, sans-serif"> <a href="#" alt="FLOOR PLANS">

                                <i class="icon-">&#xf078;</i></span>
                                <span class="downloads">FLOOR PLANS</span></a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td width="48%" align="right" style=" color:#9b999b; font-family:'Gill Sans W04 Book',Arial, Helvetica, sans-serif;letter-spacing:1px"> <a href="#" alt="MASTER PLAN">

                                <i class="icon-">&#xf078;</i></span>
                                <span class="downloads">MASTER PLAN</span></a>
                                            </td>
                                            <td width="4%"></td>
                                            <td width="48%" style=" color:#9b999b; font-family:'Gill Sans W04 Book',Arial, Helvetica, sans-serif;letter-spacing:1px"> <a href="#" alt="FACT SHEET">

                                <span class="downloads">
                                <i class="icon-">&#xf078;</i></span>
                                <span class="downloads">FACT SHEET</span></a>
                                            </td>
                                        </tr>
                                    </table>
                                    <table width="90%" border="1" BORDERCOLOR="#333" cellpadding="0" cellspacing="0" align="center" bgcolor="#070100">
                                        <tr>
                                            <td height="60">
                                                <img src="http://sunlandgroup.com.au/auto-response/images/images/blank-gif.gif" alt="" height="1" width="1">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="font-size:10px; color:#ffffff; text-align:center; font-family:'Gill Sans W04 Book',Arial, Helvetica, sans-serif;"><span class="office">NATIONAL OFFICE: ROYAL PINES RESORT, MARINA VILLAGE ROSS STREET BENOWA QUEENSLAND 4217  PHONE:<a href="tel: +61 7 5564 3700" style="color:#ffffff; text-decoration:none"> +61 7 5564 3700 </a><a href="http://www.sunlandgroup.com.au/" target="_blank" style="color:#ffffff; text-decoration:none" >SUNLANDGROUP.COM.AU</a></span>

                                            </td>
                                        </tr>
                                        <tr>
                                            <td height="30">
                                                <img src="http://sunlandgroup.com.au/auto-response/images/images/blank-gif.gif" alt="" height="1" width="1">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="font-size:10px; text-align:center;color:#9b999b; font-family:'Gill Sans W04 Book',Arial, Helvetica, sans-serif; letter-spacing:1px;"><span class="office">COPYRIGHT 2013 SUNLAND GROUP  LIMITED ALL RIGHTS RESERVED.  DISCLAIMER  PRIVACY POLICY</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height="30">
                                                <img src="http://sunlandgroup.com.au/auto-response/images/images/blank-gif.gif" alt="" height="1" width="1">
                                            </td>
                                        </tr>
                                        <!------------------------------>
                                        <!--! TableSide-->
                                        <!------------------------------>
                                        <td width="5%">
                                            <img src="http://sunlandgroup.com.au/auto-response/images/images/blank-gif.gif" alt="" height="1" width="1">
                                        </td>
                        </tr>
                        </table>
                        </td>
                        <td width="50">
                            <img src="http://sunlandgroup.com.au/auto-response/images/images/blank-gif.gif" alt="" height="1" width="1">
                        </td>
            </tr>
            </table>
            </table>
</body>

2 个答案:

答案 0 :(得分:2)

更改媒体查询
 @media only screen and (max-width: 479px) {

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

此外,您设置的字体大小在视口更改时不会发生变化的原因是因为它小于iPhone电子邮件客户端认为的最小用户可读大小,因此它会对其进行调整。强制客户端呈现您选择的字体大小的方法是在-webkit-text-size-adjust:none;规则中添加.office

响应式电子邮件设计可能很难找出所有不同的电子邮件客户端。本指南是一本很好的入门读物:http://www.campaignmonitor.com/guides/mobile/

答案 1 :(得分:0)

我曾经在雅虎遇到过问题!使用.fonts-sm时发送邮件。相反,我使用td[class="fonts-sm"]代替。尝试使用此技术在媒体查询中应用样式。