Css 媒体查询不适用于电子邮件
我已经尝试了很多媒体查询,试图让它在iPhone(横向/纵向)和桌面上工作,但我似乎无法同时在这两个平台上正常工作 我的一些班级在工作,但有些不在 有人可以看一下,并告诉我,如果我使用的电子邮件爆炸正确的查询。 另外,当视口更改时,class.office不会更改,而其他类会更改Css 媒体查询不适用于电子邮件,css,responsive-design,media-queries,Css,Responsive Design,Media Queries,我已经尝试了很多媒体查询,试图让它在iPhone(横向/纵向)和桌面上工作,但我似乎无法同时在这两个平台上正常工作 我的一些班级在工作,但有些不在 有人可以看一下,并告诉我,如果我使用的电子邮件爆炸正确的查询。 另外,当视口更改时,class.office不会更改,而其他类会更改 Sunland集团 @导入url(“http://fast.fonts.net/t/1.css?apiType=css&projectid=b075256d-62bd-45e3-843f-a9480a19a54
Sunland集团
@导入url(“http://fast.fonts.net/t/1.css?apiType=css&projectid=b075256d-62bd-45e3-843f-a9480a19a546”);
@字体{
字体系列:“SackerGothicW01灯”;
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)格式(“eot”),url(“http://sunlandgroup.com.au/auto-response/Fonts/558e1882-61fa-42c9-b946-2ff0b251d89e.woff)格式(“woff”),url(“字体/51d279cf-7422-4166-bea9-d5890c7b255a.ttf”)格式(“truetype”),url("http://sunlandgroup.com.au/auto-response/Fonts/b3e01acf-acc5-4cc3-aef6-d05b5bf3e24a.svg#b3e01acf-acc5-4cc3-aef6-d05b5bf3e24a”)格式(“svg”);
}
@字体{
字体系列:“Gill Sans W04书”;
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)格式(“eot”),url(“http://sunlandgroup.com.au/auto-response/Fonts/63aa9f40-04be-453a-a672-aa8f9919115d.woff)格式(“woff”),url(“Fonts/a82a5fb6-ad03-4675-801e-d3182a58ff5f.ttf”)格式(“truetype”),url(“http://sunlandgroup.com.au/auto-response/Fonts/beb2cee2-1a51-44ca-848f-4f795394ee5a.svg#beb2cee2-1a51-44ca-848f-4f795394ee5a”)格式(“svg”);
}
@字体{
字体系列:'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“”格式('embedded-opentype'),url('http://sunlandgroup.com.au/auto-response/Fonts/fontawesome-webfont.woff?v=3.0.1“)格式('woff'),url('http://sunlandgroup.com.au/auto-response/Fonts/fontawesome-webfont.ttf?v=3.0.1格式('truetype');
字体大小:正常;
字体风格:普通;
}
/*字体很棒的风格
------------------------------------------------------- */
[class^=“icon-”],[class*=“icon-”]{
字体系列:Fontsome;
字体大小:正常;
字体风格:普通;
字体大小:10px;
颜色:#a08a5e;
文字装饰:继承;
-webkit字体平滑:抗锯齿;
/*无精灵重置*/
显示:内联;
宽度:自动;
高度:自动;
线高:正常;
垂直对齐:基线;
背景图像:无;
背景位置:0%0%;
背景重复:重复;
边际上限:0;
}
.ReadMsgBody{
宽度:100%;
背景色:#ffffff;
}
.外部类{
宽度:100%;
背景色:#ffffff;
}
身体{
宽度:100%;
背景色:#070100;
保证金:0;
填充:0;
-webkit字体平滑:抗锯齿;
}
桌子{
边界塌陷:塌陷;
}
a:链接{
颜色:#9b999b;
文字装饰:无;
}
a:参观了{
颜色:#9b999b;
文字装饰:无;
}
a:悬停{
颜色:#9b999b;
文字装饰:无;
}
a:主动的{
颜色:#9b999b;
文字装饰:无;
}
.bg黑色{
背景色:#070100;
}
@仅介质屏幕和(最大宽度:479px){
.办公室{
字体大小:8px!重要
}
.地点{
宽度:5px!重要
}
.标题{
字体大小:10px!重要
}
.联系人{
字体大小:12px!重要;
线高:2!重要
}
.下载{
字体大小:12px!重要
}
.sm字体{
字体大小:8px!重要
}
img{
显示:阻止!重要
}
.浮子-l{
左边!重要
}
.电话{
字体大小:22px!重要;
颜色:#a08a5e;
线高:2!重要
}
.设备宽度{
宽度:100%!重要;
}
}
@仅介质屏幕和(最大宽度:620px){
.办公室{
字体大小:10px!重要;
颜色:浅绿色!重要;
}
body[yahoo]。下载{
字体大小:15px!重要
}
.sm字体{
字体大小:10px!重要
}
.浮子-l{
左边!重要
}
img{
显示:阻止!重要
}
.设备宽度{
最大宽度:600px!重要;
}
}
<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-"></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-"></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-"></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-"></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>
@media only screen and (max-width: 479px) {
@media only screen and (max-device-width: 480px) {