我应该如何构建 HTML 电子邮件表格，使其在移动设备上内联块但堆叠在桌面上？通常情况下会做相反的事情
问题描述 投票：0回答：1
我完成桌面版本没有问题，但试图弄清楚如何使其在移动设备上内联块却难倒了我。
不确定我是否需要进行 blockhide/blockshow 类型设置，你觉得怎么样？
我的此内容块的代码：
<tr>
<td style="padding: 0px 0px 20px 0px;">
<table bgcolor="#ffffff" width="100%" style="border-spacing: 0; border-radius: 20px 20px 20px 20px;" role="presentation">
<tr>
<td class="column-wrapper fluid-hybrid" style="padding: 0; font-size: 0; background-color: #ffffff; text-align: center; border-radius: 20px 20px 20px 20px;">
<!--[if mso]>
<table width="100%" style="border-spacing: 0;" role="presentation">
<tr>
<td width="290" valign="middle" style="padding: 0;">
<![endif]-->
<table class="column column-one-half" width="100%" style="border-spacing: 0; vertical-align: middle; width: 100%; max-width: 290px; display: inline-block; color: #fff;" role="presentation">
<tr>
<td class="padding first" style="padding: 20px;">
<a href="https://example.com"><img src="https://cms.perkspot.com/media/aavjynzt/template-large-logo-image.png" width="250" alt="Image Description"></a>
<h3 style="font-size: 20px; line-height: 24px;">This is under sixty characters and falls on a couple lines.</h3>
</td>
</tr>
</table>
<!--[if mso]>
</td>
<td width="290" valign="middle" style="padding: 0;">
<![endif]-->
<table class="column column-one-half" width="100%" style="border-spacing: 0; vertical-align: middle; width: 100%; max-width: 290px; display: inline-block; color: #fff;" role="presentation">
<tr>
<td class="padding first" style="padding: 20px;">
<a href="https://example.com"><img src="https://cms.perkspot.com/media/aavjynzt/template-large-logo-image.png" width="250" alt="Image Description"></a>
<h3 style="font-size: 20px; line-height: 24px;">This is under sixty characters and falls on a couple lines.</h3>
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
我的CSS：
<style type="text/css">
@font-face {
font-family: "proxima-nova";
src: url("https://use.typekit.net/af/efe4a5/00000000000000007735e609/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/efe4a5/00000000000000007735e609/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),
url("https://use.typekit.net/af/efe4a5/00000000000000007735e609/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
font-display: auto;
font-style: normal;
font-weight: 400;
font-stretch: normal;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
td {
padding: 0;
}
p {
font-size: 16px;
}
img {
border: 0;
}
a {
text-decoration: none;
color: #FFFFFF;
font-size: 14px;
}
.content {
line-height: 20px;
font-size: 16px;
}
u+.body .gmail-blend-screen {
background: #000;
mix-blend-mode: screen;
}
u+.body .gmail-blend-difference {
background: #000;
mix-blend-mode: difference;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
a[x-apple-data-detectors=true] {
color: inherit !important;
text-decoration: inherit !important;
}
.bg-color {
background-color: #ECEBEB;
}
span.Object {
color: inherit !important;
}
span.Object-hover {
color: inherit !important;
text-decoration: none !important;
}
@media screen and (max-width: 459.98px) {
.mobile-cell {
display: inline-block !important;
text-align: center !important;
padding: 5px !important;
}
.mobile-cell img {
width: 100% !important;
margin: 0 auto !important;
}
.td-mobile-cell {
text-align: center !important;
}
.mobile-text {
width: 100% !important;
}
.col-sm-12 {
display: block !important;
width: 100% !important;
}
img.co-branded {
height: 58px !important;
width: auto !important;
}
}
@media screen and (max-width: 399.98px) {
}
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
@media (prefers-color-scheme: dark) {
body,
table {
background: #2d2d2d !important;
color: #ffffff !important;
}
.darkmode-transparent {
background-color: transparent !important;
}
[data-ogsc] body,
table {
background: #2d2d2d !important;
color: #ffffff !important;
}
[data-ogsc] .darkmode-transparent {
background-color: transparent !important;
}
}
</style>
<style type="text/css">
/* /\/\/\/\/\/\/\/\/ CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
span.MsoHyperlink {
color: inherit;
}
span.MsoHyperlinkFollowed {
mso-style-priority: 99;
color: inherit;
}
#outlook a {
padding: 0;
}
/* Force Outlook to provide a "view in browser" message */
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
/* Force Hotmail to display emails at full width */
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
/* Force Hotmail to display normal line spacing */
body,
table,
td,
p,
a,
li,
blockquote {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* Prevent WebKit and Windows mobile changing default text sizes */
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/* Remove spacing between tables in Outlook 2007 and up */
img {
-ms-interpolation-mode: bicubic;
}
/* Allow smoother rendering of resized image in Internet Explorer */
/* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
body {
margin: 0;
padding: 0;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
table {
border-collapse: collapse !important;
}
body,
#bodyTable,
.bodyCell {
height: 100% !important;
margin: 0;
padding: 0;
width: 100% !important;
}
/* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */
/* ========== Page Styles ========== */
#templateContainer {
width: 600px;
}
body,
#bodyTable {
background-color: #ECEBEB;
font-family: 'proxima-nova', Arial, sans-serif;
font-size: 16px;
}
h1,
h2,
h3,
h4 {
color: #000;
display: block;
font-family: 'proxima-nova', Arial, sans-serif;
font-style: normal;
font-weight: bold;
line-height: 100%;
letter-spacing: normal;
margin: 0;
}
h1 {
font-size: 30px;
}
h2 {
font-size: 26px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 18px;
line-height: 22px;
margin-bottom: 0;
}
p {
margin-top: 0;
margin-bottom: 0;
font-size: 16px;
}
p.small {
margin-top: 0;
margin-bottom: 0;
font-size: 14px;
}
li {
font-size: 16px;
}
hr {
margin: 0;
}
/* ========== Body Styles ========== */
#templateBody {
background-color: #FFFFFF;
}
.bodyContent {
color: #000;
font-family: 'proxima-nova', Arial, sans-serif;
font-size: 14px;
line-height: 150%;
padding-top: 30px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 20px;
text-align: left;
background-color: #FFFFFF;
}
.bodyContent a,
.bodyContent a:link,
.bodyContent a:visited,
.bodyContent a:focus
/* Yahoo! Mail Override */
.bodyContent a .yshortcuts
/* Yahoo! Mail Override */
{
color: #007bff;
font-weight: normal;
text-decoration: none;
outline: none;
border: none;
}
.bodyContent img {
display: inline;
height: auto;
max-width: 560px;
}
/* ========== Footer Styles ========== */
#templateFooter {
background-color: #ECEBEB;
}
.footerContent {
color: #808080;
font-family: 'proxima-nova',Arial,sans-serif;
font-size: 10px;
line-height: 150%;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
text-align: left;
}
.footerContent a:link,
.footerContent a:visited,
/* Yahoo! Mail Override */
.footerContent a .yshortcuts,
.footerContent a span
/* Yahoo! Mail Override */
{
color: #000000;
font-weight: bold;
text-decoration: none;
}
/* MY STYLES */
.text-center {
text-align: center;
}
.show-mobile-only {
mso-hide: all;
display: none;
visibility: hidden;
width: 0;
}
.img-full-width {
height: auto;
max-width: 600px;
}
.font-0 {
font-size: 0;
}
.bg-color {
background-color: #ECEBEB;
}
.column-header {
box-sizing: border-box;
float: left;
}
/*-- SIMPLE TWO COLUMNS LESSON --*/
.column-wrapper {
padding: 0;
font-size: 0;
text-align: center;
}
.column {
border-spacing: 0;
vertical-align: top;
width: 100%;
display: inline-block;
color: #fff;
}
.column-one-half {
max-width: 290px;
}
.padding {
padding: 20px;
}
/*-- END SIMPLE TWO COLUMNS LESSON --*/
/* /\/\/\/\/\/\/\/\/ MOBILE STYLES /\/\/\/\/\/\/\/\/ */
@media only screen and (max-width: 599.98px) {
/* /\/\/\/\/\/\/ CLIENT-SPECIFIC MOBILE STYLES /\/\/\/\/\/\/ */
d body,
table,
td,
p,
a,
li,
blockquote {
-webkit-text-size-adjust: none !important;
}
/* Prevent Webkit platforms from changing default text sizes */
body {
width: 100% !important;
min-width: 100% !important;
}
/* Prevent iOS Mail from adding padding to the body */
/* /\/\/\/\/\/\/ MOBILE RESET STYLES /\/\/\/\/\/\/ */
.bodyCell {
padding: 0px 10px !important;
background-color: #ECEBEB !important;
}
/* /\/\/\/\/\/\/ MOBILE TEMPLATE STYLES /\/\/\/\/\/\/ */
/* ======== Page Styles ======== */
#templateContainer {
max-width: 600px !important;
width: 100% !important;
}
h1 {
font-size: 24px !important;
line-height: 100% !important;
}
h2 {
font-size: 20px !important;
line-height: 100% !important;
}
h4 {
font-size: 16px !important;
line-height: 100% !important;
}
/* ======== Header Styles ======== */
.headerContent {
font-size: 20px !important;
line-height: 125% !important;
}
/* ======== Body Styles ======== */
.bodyContent {
font-size: 16px !important;
}
/* ======== Footer Styles ======== */
.footerContent {
font-size: 14px !important;
line-height: 115% !important;
}
.footerContent a {
display: block !important;
}
/* MY STYLES */
.mobile-cell {
display: inline-block !important;
text-align: center !important;
padding: 5px !important;
}
.mobile-cell img {
width: 100% !important;
margin: 0 auto !important;
}
.td-mobile-cell {
text-align: center !important;
}
.mobile-text {
width: 100% !important;
}
.column-wrapper.fluid-hybrid .padding.second {
padding-top: 0 !important;
padding-bottom: 20px !important;
}
td.padding.first {
padding: 20px 20px 0px 20px !important;
}
.column-one-half {
text-align: center !important;
}
td.padding.second h3 {
padding-top: 20px !important;
}
.content-show {
display: block !important;
mso-hide: none !important;
}
.content-hide {
display: none !important;
mso-hide: all !important;
}
/* .column-wrapper {
padding: 15px 0 !important;
}
.column-wrapper.fluid-hybrid .column,
.column-wrapper.fluid-hybrid .column img {
max-width: 100% !important;
width: 100% !important;
}
.column-wrapper.fluid-hybrid {
padding: 15px 30px !important;
} */
}
@media screen and (max-width: 399.98px) {
/* .column-wrapper.fluid-hybrid .padding.second {
padding-top: 0 !important;
padding-bottom: 10px !important;
} */
/* .column-wrapper.fluid-hybrid {
padding: 0 !important;
}
.column-wrapper.fluid-hybrid .padding {
padding-top: 20px !important;
padding-bottom: 0 !important;
}
*/
}
</style>
它在桌面和移动设备上产生了这个结果。
1个回答
0
投票
投票
这里有很多代码，抱歉我无法重现完美的答案，但我希望以下内容能让您解决这个问题。
我想你只是想用这个来进行媒体查询：
因此，不应将图像和标题周围的两个表格都设为 100%，而应设为 50%。此外，表格中所有内容都应为 100%。
这不是完全的“内联块”，它使用严格的宽度。
只是注意到您当前的问题实际上为您的手机提供了更多空间，因此也许可以为较小的手机保留该空间（<400px), and then do what you're trying in 400-600px range. Just a thought.
最新问题
- 如何为StreamField默认值指定嵌套块？
- “MySql”查询没有为我提供正确的输出来匹配单词以标签/搜索的形式使用它们
- 如何快速制作密码确认器 3
- 如何在 BigQuery 中给定大图生成连接组件？
- 将Python中特定的中文标点符号替换为相应的英文标点符号
- 在 Azure ML sdk v2 中“从内部”取消当前管道作业
- 如何在Shopify JS中强制重新加载和清理数据？
- Google 表格 - 返回具有多个匹配条件的第 N 个结果
- 键/值对作为 PHP 中的变量
- 如何测试prawn-table生成的pdf内容
- 将 ImageDataGenerator 传递到分割模型的 U-net 进行多类分类
- 刷新令牌时，得到“client_invalid”，即使我使用相同的客户端来获取刷新令牌
- 什么是出租车调度软件，它如何使我的出租车业务受益？
- 我在调用方法时遇到问题，并且似乎无法找出调用它们的正确方法
- 在 RSpec 中，如何模拟方法以使其返回其参数
- 删除未跟踪的文件
- 配置项目“:capacitor-android”时出现问题。在 Android Studio 中
- NEXTJS 和 NEXTAUTH 跟踪用户会话
- 如何禁用电子邮件中的默认电子邮件地址样式？
- 下载完成前如何播放音频？
© www.soinside.com 2019 - 2024. All rights reserved.