如何在 html 中使文本响应？
How to make text responsive in html?
我有以下代码：
.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: "1C";
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: "14 09";
}
<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>
所以当你 运行 上面的代码时，我希望代码的格式完全相同，并且当用户在大屏幕上查看它时，所有内容都完全相同，但在诸如phones/tablets 或更小的值，这应该是我的预期输出：
我知道此图像中的输出与我代码中的文本和图像不匹配，但它本质上是相同的想法。
在 phone/tablet/smaller 设备上，我希望图像位于顶部，文本位于
下方
在更大的设备上，我希望输出是上面代码的内容
似乎是什么问题：我添加了 aligned class 以使文本在图像旁边对齐，但如果您想要响应，它似乎不起作用。我该如何解决？
你试过在“列”中使用“flex”吗？
@media screen and (max-width: 375px) {
.aligned {
display: flex;
flex-flow: column;
}
}
我们可以先决定在宽屏设备上应该是什么样子吗？目前，图像元素被赋予固定尺寸，与实际图像纵横比不对应，并且还使用了 'old' 属性对齐。
我建议我们坚持 CSS 并且说，也许在更宽的屏幕上图像应该占据宽度的 n%。您可以决定 n 的值并根据需要设置不同的断点，但是让图像在 376 像素的视口上占据 360 像素的宽度是没有意义的，这就是现在会发生的情况 - 需要一个合理的剩余 space 的文本量。
CSS 属性 浮动旨在让图像 'float' 带有文本。因此 float:left 会将图像放在左侧，任何后续文本都将使用右侧可用的 space，如果太长，则会放在图像下方。
对于小型设备，将图像和文本并排放置毫无意义，我们可以让图像占据视口宽度的 100%，而文本将位于其下方。
以这种方式使用浮动（它的设计目的）似乎也不需要 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: "1C";
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: "14 09";
}
<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>
我有以下代码：
.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: "1C";
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: "14 09";
}
<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>
所以当你 运行 上面的代码时，我希望代码的格式完全相同，并且当用户在大屏幕上查看它时，所有内容都完全相同，但在诸如phones/tablets 或更小的值，这应该是我的预期输出：
我知道此图像中的输出与我代码中的文本和图像不匹配，但它本质上是相同的想法。
在 phone/tablet/smaller 设备上，我希望图像位于顶部，文本位于
下方在更大的设备上，我希望输出是上面代码的内容
似乎是什么问题：我添加了 aligned class 以使文本在图像旁边对齐，但如果您想要响应，它似乎不起作用。我该如何解决？
你试过在“列”中使用“flex”吗？
@media screen and (max-width: 375px) {
.aligned {
display: flex;
flex-flow: column;
}
}
我们可以先决定在宽屏设备上应该是什么样子吗？目前，图像元素被赋予固定尺寸，与实际图像纵横比不对应，并且还使用了 'old' 属性对齐。
我建议我们坚持 CSS 并且说，也许在更宽的屏幕上图像应该占据宽度的 n%。您可以决定 n 的值并根据需要设置不同的断点，但是让图像在 376 像素的视口上占据 360 像素的宽度是没有意义的，这就是现在会发生的情况 - 需要一个合理的剩余 space 的文本量。
CSS 属性 浮动旨在让图像 'float' 带有文本。因此 float:left 会将图像放在左侧，任何后续文本都将使用右侧可用的 space，如果太长，则会放在图像下方。
对于小型设备，将图像和文本并排放置毫无意义，我们可以让图像占据视口宽度的 100%，而文本将位于其下方。
以这种方式使用浮动（它的设计目的）似乎也不需要 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: "1C";
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: "14 09";
}
<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>