这是我第一次在Stack Overflow上发帖，请耐心等待。我一直在努力使设计具有响应性，但我发现了一些令人恼火的问题。我会把我正在谈论的页面的链接扔出去，如果你准备挑战，你可以看看：http://www.rattlingskeleton.tk/
第一个问题是，当以一定的分辨率重新调整尺寸时，厨师部分的文本如何与厨师的照片重叠。第二种情况是，随着浏览器窗口的大小调整，评论部分的图像与下面的每个相关文本框都不一致。
我将加入所有与这些部分相关的CSS代码：
/* Chef */
.chef {
margin: 40px;
}
#border {
border-style: solid;
border-width: 2px;
padding: 20px 20px 20px 20px;
}
/* Testimonials */
.testimonials {
margin-top: 50px;
}
.testimonials img {
border-radius: 50%;
height: 125px;
width: 125px;
margin-left: 55px;
margin-bottom: 27px;
}
.text {
text-align: center;
margin-bottom: 30px;
}
.newcontainer {
position: relative;
width: 65%;
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
这些是当网站显示在桌面上时所涉及的CSS部分。接下来是HTML:
<div class="chef">
<div class="container" id="border">
<div class="row">
<div class="six columns">
<img id="large" src="images/Jacques-Pauvert-biography.jpg"/>
<img id="medium" src="images/scaled.jpg"/>
<img id="small" src="images/cropped-chef.jpg"/>
</div>
<div class="six columns">
<h1>THIS IS A CHEF</h1>
<p id="long">Lorem ipsum dolor sit amet, sonet fabulas apeirian an pri. Mea ex euripidis sententiae, nam ea aliquip contentiones. Duo dico probatus concludaturque an, eam ea soluta nostrum, assum putent cu qui. Etiam cetero ius in, no cibo putent suscipiantur est, facilis detracto nominati vel at. Recusabo consectetuer sit cu, esse inani no vis. Vim meliore electram mnesarchum ne, tacimates periculis necessitatibus id pro. Utamur vituperatoribus at sea, partem indoctum per ea. Soleat libris ne nec, cibo dissentiunt ea ius. Diam apeirian est te, vim cu alia suscipit tractatos. Lucilius dissentiunt ad pri, eu aliquid maluisset quo. Eum no consulatu conceptam. Vis cu labores graecis feugait.</p>
<p id="short">Lorem ipsum dolor sit amet, sonet fabulas apeirian an pri. Mea ex euripidis sententiae, nam ea aliquip contentiones. Duo dico probatus concludaturque an, eam ea soluta nostrum, assum putent cu qui. Etiam cetero ius in, no cibo putent suscipiantur est, facilis detracto nominati vel at. Recusabo consectetuer sit cu, esse inani no vis.</p>
<a class="button" id="about-left" href="#">READ MORE</a>
<center><a class="button" id="about-center" href="#">READ MORE</a></center>
</div>
</div>
</div>
</div>
<div class="testimonials">
<div class="newcontainer">
<div class="row">
<div class="four columns">
<img src="images/team1.jpg"/>
</div>
<div class="four columns">
<img src="images/team2.jpg"/>
</div>
<div class="four columns">
<img src="images/team3.jpg"/>
</div>
</div>
</div>
<div class="text">
<div class="newcontainer">
<div class="row">
<div class="four columns">
<p><strong>“Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.”</p>
</div>
<div class="four columns">
<p><strong>“Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.”</p>
</div>
<div class="four columns">
<p><strong>“Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.”</p>
</div>
</div>
</div>
</div>
</div>
如果有人能解决这个问题并向我展示他们是如何做到的，那就太好了；他们会得到我的尊重。祝任何想打一针的人好运。
-
您的"中等"尺寸图片似乎没有设置宽度或最大宽度。图片旁边的文本的宽度设置为48%。您在文本上使用了左4%的边距，但这还不够，因为元素试图占据父元素的48%。
-
推荐图片设置为左边距：55像素。当文本列为左边距时：0px。在我的高分辨率上，推荐图像不是以全屏为中心的。我认为55像素可能看起来集中在一个较小的显示器在全屏。
对于第一个问题，尝试将主要部分的媒体查询从max-width: 975px更改为max-width: 1034px，并从max-width: 550px更改为max-width: 730px
对于第二个，我找不到任何问题，如果你想在小于960的屏幕上显示文本部分，那么试着添加与该部分相关的JS/css（媒体）代码，以获得更好的视图。