为什么我的页面不是 100% 响应？

Question

我正在通过简单地投入不同的项目来学习编码并且我被困在我的页面上。几天来我一直致力于让这个页面响应，但我无法让它工作。是我的图像没有响应吗？还是它们所在的容器？想不通了。

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>

Answer 1

尽量不要给出以像素为单位的固定大小：从 img 标签中删除宽度和高度属性并输入 css 宽度：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>

为什么我的页面不是 100% 响应？

Why is my page not 100% responsive?

javascript

css

mobile

responsive-design

responsive-images