javascript - 如何在html中使文本响应？

Question

我有以下代码：

.aligned { 
            display: flex; 
            align-items: top; 
        } 
.p{
            padding: 15px; 
}

@media screen and (max-width: 375px) {
  .aligned {
    display: inline;
    top: 15px;
  }
}
img{
border: 5px solid #555;
}
blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
width: 800px;
margin: 0.25em 0;
padding: 0.35em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}

blockquote:before {
display: block;
padding-left: 10px;
content: "\201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}

blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
 
blockquote cite:before {
content: "\2014 \2009";
}

<img src="https://previews.123rf.com/images/lekanto/lekanto1708/lekanto170800012/84171612-country-road-leading-to-the-forest-morning-picutre-made-during-sunrise-.jpg" align="left" width="370" height="500">

  <div class="aligned">
    <div class="p">
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et hendrerit enim, sit amet sollicitudin est. Suspendisse rutrum nisl id consectetur tempus. Vestibulum in dictum risus. Suspendisse placerat leo ultrices leo scelerisque eleifend. Maecenas non mi non erat luctus facilisis. Proin tincidunt tellus nulla, vel faucibus diam mattis et. Nam tempus dui at venenatis convallis. Nulla tempor non velit quis consequat. Phasellus nec consequat eros. Vivamus et malesuada nisl, non hendrerit tortor. Aliquam non est sem.</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et hendrerit enim, sit amet sollicitudin est. Suspendisse rutrum nisl id consectetur tempus. Vestibulum in dictum risus. Suspendisse placerat leo ultrices leo scelerisque eleifend. Maecenas non mi non erat luctus facilisis. Proin tincidunt tellus nulla, vel faucibus diam mattis et. Nam tempus dui at venenatis convallis. Nulla tempor non velit quis consequat. Phasellus nec consequat eros. Vivamus et malesuada nisl, non hendrerit tortor. Aliquam non est sem.
</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et hendrerit enim, sit amet sollicitudin est. Suspendisse rutrum nisl id consectetur tempus. Vestibulum in dictum risus. Suspendisse placerat leo ultrices leo scelerisque eleifend. Maecenas non mi non erat luctus facilisis. Proin tincidunt tellus nulla, vel faucibus diam mattis et. Nam tempus dui at venenatis convallis. Nulla tempor non velit quis consequat. Phasellus nec consequat eros. Vivamus et malesuada nisl, non hendrerit tortor. Aliquam non est sem.
</p>
       
          <blockquote>
          Nothing Is Impossible. The Word Itself Says 'IM Possible'
          <cite>Audrey Hepburn</cite>
           </blockquote>
           
        </div>

因此，当您运行上面的代码时，我希望代码的格式完全相同，并且当用户在大屏幕上查看它时，一切都完全相同，但在手机/平板电脑或任何更小的设备上，这应该是我的预期输出：

我知道此图像中的输出与我的代码中的文本和图像不匹配，但它本质上是相同的想法。

在手机/平板电脑/较小的设备上，我希望将图像放在顶部，文本放在正下方

在更大的设备上，我希望输出是上面的代码

似乎是什么问题：我添加了一个aligned类以使文本在图像旁边对齐，但如果您想要响应，它似乎不起作用。我该如何解决？

标签： javascripthtmlcssresponsive-design

Answer 1

我们可以先决定在宽设备上应该是什么样子吗？目前，图像元素被赋予了与实际图像纵横比不对应的固定尺寸，并且还使用了“旧”属性对齐。

我建议我们坚持使用 CSS 并说，也许在更宽的屏幕上，图像应该占据 n% 的宽度。您可以决定 n 的值并根据需要设置不同的断点，但是让图像在 376px 视口上占用 360px 宽度是没有意义的，这就是现在会发生的情况 - 需要有一个合理的留给文本的空间量。

CSS 属性 float 旨在允许图像与文本一起“浮动”。因此float:left将图像放在左侧，任何后续文本将使用右侧的可用空间，如果太长，它将位于图像下方。

对于小型设备，将图像和文本并排放置是没有意义的，我们可以让图像占据视口宽度的 100%，文本将位于其下方。

以这种方式使用 float （它的设计目的）似乎也不需要 flex 。

这是帮助您入门的简化代码段 - 您可能希望更改媒体断点以具有不同的图像宽度百分比。

.p{
            padding: 15px; 
}

img{
border-sizing: border-box;
width: 30%;
border: 5px solid #555;
float: left;
  margin-right: 10px;
}
@media screen and (max-width: 375px) {
  img {
    width: 100%;
  }
}
blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
width: 800px;
margin: 0.25em 0;
padding: 0.35em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}

blockquote:before {
display: block;
padding-left: 10px;
content: "\201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}

blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
 
blockquote cite:before {
content: "\2014 \2009";
}

<img src="https://previews.123rf.com/images/lekanto/lekanto1708/lekanto170800012/84171612-country-road-leading-to-the-forest-morning-picutre-made-during-sunrise-.jpg">

           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et hendrerit enim, sit amet sollicitudin est. Suspendisse rutrum nisl id consectetur tempus. Vestibulum in dictum risus. Suspendisse placerat leo ultrices leo scelerisque eleifend. Maecenas non mi non erat luctus facilisis. Proin tincidunt tellus nulla, vel faucibus diam mattis et. Nam tempus dui at venenatis convallis. Nulla tempor non velit quis consequat. Phasellus nec consequat eros. Vivamus et malesuada nisl, non hendrerit tortor. Aliquam non est sem.</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et hendrerit enim, sit amet sollicitudin est. Suspendisse rutrum nisl id consectetur tempus. Vestibulum in dictum risus. Suspendisse placerat leo ultrices leo scelerisque eleifend. Maecenas non mi non erat luctus facilisis. Proin tincidunt tellus nulla, vel faucibus diam mattis et. Nam tempus dui at venenatis convallis. Nulla tempor non velit quis consequat. Phasellus nec consequat eros. Vivamus et malesuada nisl, non hendrerit tortor. Aliquam non est sem.
</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et hendrerit enim, sit amet sollicitudin est. Suspendisse rutrum nisl id consectetur tempus. Vestibulum in dictum risus. Suspendisse placerat leo ultrices leo scelerisque eleifend. Maecenas non mi non erat luctus facilisis. Proin tincidunt tellus nulla, vel faucibus diam mattis et. Nam tempus dui at venenatis convallis. Nulla tempor non velit quis consequat. Phasellus nec consequat eros. Vivamus et malesuada nisl, non hendrerit tortor. Aliquam non est sem.
</p>
       
          <blockquote>
          Nothing Is Impossible. The Word Itself Says 'IM Possible'
          <cite>Audrey Hepburn</cite>
           </blockquote>
           
        </div>