以下是我编写的代码，请帮助我做出响应：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--supports all Unicode characters in our document-->
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!--Windows Phones will display our mobile version correctly-->
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<!-- <link rel="stylesheet" type="text/css" href="styles.css" /> -->
<style>
/* Basics */
body {
margin: 0 !important; /* used for avoiding spaces and align from top */
padding: 0;
background-color: #3C3C3C;
}
table {
border-spacing: 0; /* to avoid spacing to borders */
font-family: sans-serif;
color: #333333;
}
td {
padding: 0;
}
img {
border: 0;
}
div[style*="margin: 16px 0"] {
margin:0 !important;
}
.wrapper {
width: 100%;
table-layout: fixed;
-webkit-text-size-adjust: 100%;/* to prevent the iPhone and iPad from inflating some fonts*/
-ms-text-size-adjust: 100%;
}
.webkit {
max-width: 600px;
margin: 0 auto;
background-color:#FFFFFF;
}
.outer {
Margin: 0 auto;
width: 100%;
max-width: 600px;
}
.full-width-image img {
width: 100%;
max-width: 600px;
height: auto;
}
.full-width-image h1{
margin: 0 auto;
font-size:22px;
border-bottom:3px solid #919191;
color:#3C3C3C;
padding-bottom:5px;
}
.inner {
padding: 10px;
}
p {
Margin: 0;
}
.h1 {
font-size: 21px;
font-weight: bold;
Margin-bottom: 18px;
}
.h2 {
font-size: 18px;
font-weight: bold;
Margin-bottom: 12px;
}
/* One column layout */
.one-column .contents {
text-align: left;
}
.one-column p {
padding:10px 0px 5px 5px;
color:#15717D;
font-size:20px;
font-family:sans-serif;
font-weight:bold;
}
.two-column{
background-color:#F36533;
padding:15px 0px 10px 35px;
}
.text1{
color:#FFFFFF;
font-size:22px;
font-family:sans-serif;
}
.text2{
color:#FFFFFF;
font-family:sans-serif;
font-size:12px;
}
.col-text{
padding-left:15px;
padding-top:10px;
font-size:16px;
font-family:sans-serif;
font-weight:bold;
color:#15717D;
}
.safety-text p{
font-size:21px;
font-weight:bold;
padding: 25px 0 25px 15px;
line-height:26px;
}
.safety-text span{
font-size:14px;
font-weight:lighter;
}
.safety-text a{
font-weight:bold;
color:#3C3C3C;
}
.brand-text{
padding:8px 0px 40px 15px;
font-size:30px;
color:#6FFEEC;
text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000;
}
.box-content p{
padding:20px 135px 5px 10px;
background-color:#000000;
<!-- width:420px; -->
}
.register-button{
background-color:#000000;
padding: 15px 0px 20px 10px;
}
.register-button p {
color:#15717D;
border:1px solid #FFFFFF;
border-radius:30px;
background-color:#FFFFFF;
width:220px;
text-align:center;
padding: 15px;
}
.indication-text p{
font-size: 20px;
width: 560px;
color:#72635C;
}
.indication-text{
padding:0px 0px 0px 20px;
line-height:2em;
}
.speakers-text{
padding:0 0 0 20px;
}
.list-items{
font-size: 20px;
color:#72635C;
font-weight:bold;
list-style:none;
}
li::before {
content: "•";
color: #F16532
}
.speaker-details1{
vertical-align:top;
padding-left: 15px;
}
.speaker-details2{
vertical-align:top;
padding-left: 15px;
}
.speaker-details2 h2{
color:#72635C;
}
.speaker-details2 p{
color:#FFFFFF;
border:1px solid #FFFFFF;
border-radius:30px;
background-color:#15717D;
width:220px;
text-align:center;
padding: 15px;
}
.bottom-text{
padding:15px 0 40px 10px;
}
.bottom-text p{
font-size: 19px;
color:#72635C;
}
.bottom-text a {
color:#72635C;
}
</style>
</head>
<body>
<center class="wrapper">
<div class="webkit">
<table class="outer" align="center">
<tr>
<td>
<div class="column">
<table class="outer" align="center">
<tr>
<td class="full-width-image">
<h1>Main Heading Goes here for the following template</h1>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="one-column">
<div class="column">
<table width="100%">
<tr>
<td class="inner contents">
<p>From:<br>
TO:<br>
Date:<br>
Subject:<br>
[Pre header]
</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="two-column">
<div class="column">
<table width="100%">
<tr>
<td class="two-column-img">
<img src="images/gsk-logo.png" alt="gsk" style="width:80px;height:55px;"/>
</td>
<td class="text1">
For HealthCare Professionals
</td>
</tr>
<tr>
<td colspan="2" class="text2">
<p style="font-size:12px;font-family:sans-serif;"><u>[Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.]</u></p>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="information-column">
<div class="column">
<table width="100%">
<tr>
<td class="col-text">
<u>Prescribing Information</u></p>
</td>
<td class="col-text">
<u>[Patient Information Leaflet]</u>
</td>
</tr>
<tr>
<td colspan="2" class="safety-text">
<p>
Important Safety Information<br>
<span>Lorem ipsum dolor sit amet, consectetur,sed to euismod temper incididunt<br>ut labore et dolore magna aquila.<a>Continued Below</a></span>
</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="one-column">
<div class="column">
<table width="100%">
<tr>
<td class="brand-text">
[BRAND LOGO,GENERIC,STRENGTHS]
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="one-column">
<div class="column">
<table width="90%" style="margin-left:10px;">
<tr>
<td class="box-content">
<p style="color:#FFFFFF;">You're invited to:</p>
<p style="color:#FFFFFF;">[Title,Speaker First name Last name] <br>[Work Area]</p>
<p style="color:#FFFFFF;">[Date] | [Time] | Website</p>
</td>
</tr>
<tr>
<td class="register-button">
<p>Register for Website</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="indication">
<div class="column">
<table width="100%">
<tr>
<td class="indication-text">
<h2>Indication</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="indication">
<div class="column">
<table width="100%">
<tr>
<td class="indication-text">
<h2>[Greeting Salutation]</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="indication">
<div class="column">
<table width="100%">
<tr>
<td class="indication-text">
<h2>[List of Website Listings]</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul class="list-items">
<li>
Unordered list item
</li>
<li>
Unordered list item
</li>
</ul>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="speakers-text">
<h2>Speakers</h2>
</td>
</tr>
<tr>
<td class="speakers-list">
<div class="column">
<table width="100%">
<tr>
<td class="inner">
<table class="contents">
<tr>
<td>
<img src="images/img1.png" width="270" height="185" alt="" />
</td>
<td class="speaker-details1" align="top">
<h3>[Follow MI template for speaker bio]</h3>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="speakers-list">
<div class="column">
<table width="100%">
<tr>
<td class="inner">
<table class="contents">
<tr>
<td>
<img src="images/img2.png" width="270" height="185" alt="" />
</td>
<td class="speaker-details2">
<h3>[Follow MI template for speaker bio]</h3>
</td>
</tr>
<tr>
<td colspan="2" class="full-text">
<h2>[Full Important Safety Information]</h2>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="speakers-list">
<div class="column">
<table width="100%">
<tr>
<td class="inner" style="border-top:5px solid #F36533;">
<table class="contents">
<tr>
<td>
<img src="images/img3.png" width="270" height="185" alt="" />
</td>
<td class="speaker-details2">
<h2>[Join and Speaker name text.]</h2>
<p>Register for Website</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="bottom-text">
<p>Please see full <u>Prescribing information</u>,including <u>[Patient Information Leaflet]</u>, for [PRODUCT(Generic)]</p><br>
<p>This email is intented for US healthcare professionals only.</p><br>
<p>To report SUSPECTED ADVERSE REACTIONS, contact MadhuriChiluka at 1-835-965-1254 of FAD at 1-756-FAD-8475 or <a>www.fad.div/telecomh</a>.</p><br>
<p>[PRODUCT] is a registered trademark of ABC.</p><br>
<p><u>[ABC LOGO]</u> © [YYYY] ABC group of companies.All rights reserved.Produced in INDIA.[Activity ID][Month YYYY]</p><br>
<p>Do not reply to this e-mail.Replies sent to this e-mail address are not received.</p><br>
<p>[MadhuriChiluka Response Center, P.O.Box 201, 1 Mreoo Dr.,Researchpark Park, NC 58794]</p><br>
<p>[If you are not interested in receiving further e-mail communications like this one,or if you received this message in error,please visit <a>www.contactus.abc.com/genius.html</a>]</p><br>
<p>[Third Party mailing address and 125-YGOO statment]</p><br>
<p><u>[Privacy Statement]</u></p>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</center>
</body>
</html>
最佳答案
我认为您必须学习CSS响应式知识。
然后尝试一下，如果您卡在某些东西上，然后再回来。
http://learn.shayhowe.com/advanced-html-css/responsive-web-design/
克里斯托夫（Br Christoph）
关于css - 如何将普通的html电子邮件模板制作为自适应(不包含所有屏幕，例如PC，Ipad和移动设备)以下代码的电子邮件模板，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46215364/