0

我只是通过被扔到不同的项目中来学习编码，但我被困在我的页面上。几天来，我一直在努力使此页面具有响应性，但无法使其正常工作。是我的图像没有响应吗？还是它们所在的容器？我想不通。

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>

4

1 回答 1

0

尽量不要以像素为单位给出固定大小：从 img 标签中删除 width 和 height 属性并放入 css width: 100%。这样，所有图像都会响应。也使用百分比来定义宽度。

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;
    width: 100%; /*USE PERCENTAGE*/
}
.img2 {
	padding: 20px 0 0 0; 
  width: 100%; /*USE PERCENTAGE*/
	}
.img3 {
	padding: 20px 0 46px 0;
  width: 100%; /*USE PERCENTAGE*/
	}
#Template1,
#Template2,
#Template3 {
  margin-top: 14px;
  background-color: #cb3778;
  font-family: Arial;
  font-size: 20px;
  width: 50%; /*USE PERCENTAGE*/
  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>
  <!-- DO NOT FIX WIDTH AND HEIGHT ATTRIBUTE in img tag, use css instead -->
<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 border="0" 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 border="0" 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 border="0" 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>

于 2016-02-15T15:38:06.843 回答