【发布时间】：2016-02-15 23:38:06
【问题描述】：
我只是被投入到不同的项目中来学习编码，但我被困在我的页面上。几天来，我一直在努力使此页面具有响应性，但我无法使其正常工作。是我的图像没有响应吗？还是它们所在的容器？我想不通。
window.onload=function(){
$("div[id^=Template]").click(function() {
var id = $(this).attr('id');
var theContent = $('#contents').find('.' + id);
$('#contents').children().hide();
theContent.show();
$('body').animate({ scrollTop: $('#contents').offset().top }, 'fast');
});
} .cell1 {
text-align: center;
width: 400px;
}
.cell2 {
padding: 10px 20px 10px 20px;
text-align: center;
width: 100%;
}
.Column {
vertical-align: top;
width: 500px;
display: inline-block;
}
.img1 {
padding: 20px 0 2px 0;
}
.img2 {
padding: 20px 0 0 0;
}
.img3 {
padding: 20px 0 46px 0;
}
#Template1,
#Template2,
#Template3 {
margin-top: 14px;
background-color: #cb3778;
font-family: Arial;
font-size: 20px;
width: 260px;
float: center;
color: #FFF;
cursor: pointer;
}
.Template0 {
display: block;
clear: both;
width: 100%;
}
.Template1,
.Template2,
.Template3 {
display: none;
clear: both;
width: 100%;
}
@media only screen and (max-width: 480px) {
.mobile {
display: block !important;
margin-top: 14px !important;
margin-bottom: 14px !important;
margin-left: 0px !important;
padding: 10px 0 10px 0 !important;
}
.mobile-img {
display: block !important;
Width: 100% !important;
align: center !important;
padding: 0px 0px 0px 0px !important;
}
.mobile-column {
display: block !important;
Width: 100% !important;
align: center !important;
}
.mobile-cell1 {
display: block !important;
width: 100% !important;
}
.mobile-cell2 {
display: block !important;
width: 100% !important;
} <body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div align="center">
<div align="center" style="font-size:25px; font-family:Arial, Helvetica, sans-serif; color:#000000; line-height:24px; padding-top:15px; padding-bottom:25px;">Mailing Templates</div>
<div class="Column mobile-column">
<div class="cell1 mobile-cell1"><img width="400" border="0" height="356" spname="col1-2.jpg" name="col1-2.jpg" contentid="12195208" xt="SPIMAGE" alt="Template 1" class="img1 mobile-img" id="IMCvendors-Keena22.jpg" title="Template 1" src="http://contentz.mkt51.net/lp/10613/575195/col1-2.jpg" /></div>
<div id="Template1" class="cell2 mobile">Template 1</div>
</div>
<div class="Column mobile-column">
<div class="cell1 mobile-cell1"><img width="400" border="0" height="358" spname="6pack-1.jpg" name="6pack-1.jpg" contentid="12192292" xt="SPIMAGE" alt="Template 2" class="img2 mobile-img" id="IMCvendors-Keena22.jpg" title="Template 1" src="http://contentz.mkt51.net/lp/10613/575195/6pack-1.jpg" /></div>
<div id="Template2" class="cell2 mobile">Template 2</div>
</div>
<div class="Column mobile-column">
<div class="cell1 mobile-cell1"><img width="400" border="0" height="312" spname="hero-1col.jpg" name="hero-1col.jpg" contentid="12195206" xt="SPIMAGE" alt="Template 3" class="img3 mobile-img" id="IMCvendors-Keena22.jpg" title="Template 3" src="http://contentz.mkt51.net/lp/10613/575195/hero-1col.jpg" /></div>
<div id="Template3" class="cell2 mobile">Template 3</div>
</div>
</div>
<div align="center" id="contents">
<div align="center" id="content0" class="Template0" style="padding-top:50px; padding-bottom:50px;"><img width="400" border="0" height="161.29" spname="choose-a-template4_0.jpg" name="choose-a-template4_0.jpg" contentid="12205657" xt="SPIMAGE" alt="Choose a template" class="mobile-img" id="IMCvendors-Keena22.jpg" title="Choose a template" src="http://contentz.mkt51.net/lp/10613/575195/choose-a-template4_0.jpg" /></div>
<div align="center" id="content1" class="Template1" style="padding-top:50px; padding-bottom:50px;">sample demo txt T1</div>
<div align="center" id="content2" class="Template2" style="padding-top:50px; padding-bottom:50px;">sample demo txt T2</div>
<div align="center" id="content3" class="Template3" style="padding-top:50px; padding-bottom:50px;">sample demo txt T3</div>
</div>
</body>【问题讨论】：
-
在制作响应式网页时，应避免使用以 px 为单位的度量，但应使用百分比或 em。这样一来，您的所有元素都将更具响应性（或者至少这是我在制作网站时所学到的）
标签： javascript css mobile responsive-design responsive-images