我会非常原谅帮助，我开始研究前面 - 并在这项任务上陷入了昏迷。借助对flex+float技术的理解，我需要通过媒体查询来完成以下任务：
“使用固定布局的附件。使用以下媒体查询创建响应式网页布局：非常小的设备（手机，小于 768 像素）（1 张图片）小型设备（平板电脑，768 像素或更多）（2 张图片）中型设备（台式机, 992px 及以上) 大型设备 (大型桌面, 1200px 及以上)"
* {
box-sizing: border-box;
}
.page-wrap {
width: 800px;
margin: 20px auto;
}
.main-story {
position: relative;
margin: 0 0 25px 0;
}
img {
display: block;
}
a {
color: lightblue;
}
.story-intro {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.75);
padding: 20px;
color: white;
}
h1 {
font-size: 4em;
}
h1, h2 {
margin: 0 0 10px 0;
}
.story-intro h1 {
font-size: 2.5em;
}
.story-intro p {
margin: 0;
}
.sub-stories {
overflow: hidden;
margin: 0 0 25px 0;
}
.sub-story {
float: left;
width: 250px;
margin-right: 25px;
position: relative;
font-size: 80%;
}
.last {
margin-right: 0;
}
/* Медиа-запросы пробовал писать я сам :(
}
@media screen (max-width: 768px) {
.story-intro, p, h1, img {
width: 100vw;
position: relative;
}
.sub-story {
float: none;
}
}
@media screen (min-width: 768px) and (max-width: 992px) {
.page-wrap, .sub-stories{
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
height: auto;
}
.main-story, .sub-story:first-child, .sub-story:last-child, .last, h1, h2, p{
width: 50%;
margin: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
}
@media screen (min-width: 992px) and (max-width: 1200px) {
}
@media screen (min-width: 1200px) {
}
*/<!-- This is a piece of code -->
<div class="page-wrap">
<h1>Make This Responsive</h1>
<p>While maintaining the heirarchy of importance.</p>
<article class="main-story">
<img src="http://f.cl.ly/items/2e3c2a1Z0D1H3u0W2K12/shera.jpg" alt="Sha Ra Rocking"/>
<div class="story-intro">
<h1>Most Important Story</h1>
<p>This article has the most visual weight. <a href="http://nebezial.deviantart.com/art/she-ra-115867096">image source.</a></p>
</div>
</article>
<section class="sub-stories">
<article class="sub-story">
<img src="http://placekitten.com/250/350"/>
<div class="story-intro">
<h2>Less Important Story</h2>
<p>This story has less visual weight.</p>
</div>
</article>
<article class="sub-story">
<img src="http://placecage.com/250/350"/>
<div class="story-intro">
<h2>Less Important Story</h2>
<p>This story has less visual weight.</p>
</div>
</article>
<article class="sub-story last">
<img src="http://placebear.com/250/350"/>
<div class="story-intro">
<h2>Less Important Story</h2>
<p>This story has less visual weight.</p>
</div>
</article>
</section>
</div>
Ps 我将不胜感激并感谢任何帮助。我很善于接受批评，所以不要退缩。我做了我能做的一切（我试着自己写请求），我理解得很糟糕，我很困惑..但想知道的愿望并没有减少:)
我不知道为什么会有媒体查询以及在其中写什么，如果没有它们一切都是自适应的，我唯一要做的就是以某种方式修复边距。
我非常感谢那些帮助过我的人，我提出了我的最终版本的 css 答案（任务中的 html）——如果有人有意见或建议，请不要害羞——我对你的意见很感兴趣。