如何在 html/css 中使文本响应？
How to make text responsive in html/css?
我想让一个文本响应，它应该根据设备宽度相应地改变它的大小。
代码：
.aligned {
display: flex;
align-items: top;
}
.p{
padding: 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";
}
<section>
<link rel="stylesheet" href="assets/img/profile.jpg">
<img src="assets/img/profile.jpg" align="left" width="370" height="500">
<!-- <div style="display:inline-block;"> to put text under something or start new -->
<div class="aligned">
<div class="p">
<p>I am currently exploring different options that will allow me to combine my interests in Business and Technology, and pursue a combined-degree in those fields. Motivated by my love for numbers, I started to explore the many ways I can use my Mathematical knowledge and implement it into different areas. While I always had a passion for business, I was introduced to Computer Science in my junior years of high school, and I came to know that I was genuinely passionated about learning it. It offers a holistic approach to solve problems which I admire, and since then, I have transformed my interest into a personal hobby!</p>
<p>I would always like to challenge myself and learn new programming langauges to increase the size of my toolbox. I was inspired by one of my friends to take my programming skills and put it into a good use; thus, I was introduced to competitive programming and large coding events such as hackathons!</p>
<p>The intellectual challenges, creativity, and logic programming offers has always further strengthened the inevitable bond between us. All you need is a notepad, and the world becomes your <i>canvas.</i></p>
<p>Challenging myself allows me to not only grow outside my comfort zone, but gives a new perspective towards life, and how there are no limitations/boundaries that halt you from growing! It is everlasting. Once you develop the growth mindset, your journey just never comes to a complete stop! You are able to focus on self-development and different ways to come out of the comfort zone.</p>
<blockquote>
Nothing Is Impossible. The Word Itself Says 'IM Possible'
<cite>Audrey Hepburn</cite>
</blockquote>
</div>
</section><!-- End About Section -->
所以我想让文本和块引用（出现在底部）响应，并且它应该根据设备的宽度改变大小。
在移动设备上，我希望所有内容都在图像之后垂直对齐，但在更大的设备上，它应该看起来像我发送的代码输出中的样子。
这是用户向我建议的，但似乎没有用：
@media screen and (max-width: 250px) {
font-size: 10vh; // Or the unit you want
flex-direction: column;
}
基本上，我希望文本在移动设备上垂直显示在图片下方，但在大型设备上，它应该显示我在上面的代码中发送的内容。
更新
这是我的输出结果：
我不希望图片变小，我不知道为什么应用更改后它变小了，文字应该在它的正下方。
首先，从 HTML 中的 img 标签中删除 align="left"。
然后添加 float: left; CSS 中的 img 规则集。
最后，修改您的媒体查询以包含部分和 img 选择器：
.aligned {
display: flex;
align-items: top;
}
.p{
padding: 15px;
}
img{
border: 5px solid #555;
float:left;
}
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";
}
@media screen and (max-width: 250px) {
img{
display: block;
float: none;
}
section{
font-size: 10vh; // Or the unit you want
}
}
<section>
<link rel="stylesheet" href="assets/img/profile.jpg">
<img src="assets/img/profile.jpg" width="370" height="500">
<!-- <div style="display:inline-block;"> to put text under something or start new -->
<div class="aligned">
<div class="p">
<p>I am currently exploring different options that will allow me to combine my interests in Business and Technology, and pursue a combined-degree in those fields. Motivated by my love for numbers, I started to explore the many ways I can use my Mathematical knowledge and implement it into different areas. While I always had a passion for business, I was introduced to Computer Science in my junior years of high school, and I came to know that I was genuinely passionated about learning it. It offers a holistic approach to solve problems which I admire, and since then, I have transformed my interest into a personal hobby!</p>
<p>I would always like to challenge myself and learn new programming langauges to increase the size of my toolbox. I was inspired by one of my friends to take my programming skills and put it into a good use; thus, I was introduced to competitive programming and large coding events such as hackathons!</p>
<p>The intellectual challenges, creativity, and logic programming offers has always further strengthened the inevitable bond between us. All you need is a notepad, and the world becomes your <i>canvas.</i></p>
<p>Challenging myself allows me to not only grow outside my comfort zone, but gives a new perspective towards life, and how there are no limitations/boundaries that halt you from growing! It is everlasting. Once you develop the growth mindset, your journey just never comes to a complete stop! You are able to focus on self-development and different ways to come out of the comfort zone.</p>
<blockquote>
Nothing Is Impossible. The Word Itself Says 'IM Possible'
<cite>Audrey Hepburn</cite>
</blockquote>
</div>
</section><!-- End About Section -->
首先，将您的 display: flex 放在您的部分，因为它将作为您的图像和文本的容器。
所以改变这个
.aligned {
display: flex;
align-items: top;
}
至此
section {
display: flex;
align-items: top;
}
或者您可以将 .align class 转移到
部分
接下来，您的媒体查询语法错误，最大屏幕太小。即使是最小的屏幕（Iphone5s）也是 375px。在我看来，500px 是移动设备的安全最大宽度（只是我的偏好）。这是正确的代码
@media screen and (max-width: 500px) {
section {
font-size: 10vh; // Or the unit you want
flex-direction: column;
}
}
我忘了说：要使 display: flex 正常工作，您需要将元素放在 div 中，以便 flex 可以按您想要的方式对齐它。所以你要做的就是将你的图像放入 div 这样的
<div>
<link rel="stylesheet" href="assets/img/profile.jpg">
<img src="assets/img/profile.jpg" align="left" width="370" height="500">
</div>
简而言之，您的 html 结构应该如下所示
<section>
<div>
place your image here
</div>
<div>
place all your texts here
</div>
</section>
我想让一个文本响应，它应该根据设备宽度相应地改变它的大小。
代码：
.aligned {
display: flex;
align-items: top;
}
.p{
padding: 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";
}
<section>
<link rel="stylesheet" href="assets/img/profile.jpg">
<img src="assets/img/profile.jpg" align="left" width="370" height="500">
<!-- <div style="display:inline-block;"> to put text under something or start new -->
<div class="aligned">
<div class="p">
<p>I am currently exploring different options that will allow me to combine my interests in Business and Technology, and pursue a combined-degree in those fields. Motivated by my love for numbers, I started to explore the many ways I can use my Mathematical knowledge and implement it into different areas. While I always had a passion for business, I was introduced to Computer Science in my junior years of high school, and I came to know that I was genuinely passionated about learning it. It offers a holistic approach to solve problems which I admire, and since then, I have transformed my interest into a personal hobby!</p>
<p>I would always like to challenge myself and learn new programming langauges to increase the size of my toolbox. I was inspired by one of my friends to take my programming skills and put it into a good use; thus, I was introduced to competitive programming and large coding events such as hackathons!</p>
<p>The intellectual challenges, creativity, and logic programming offers has always further strengthened the inevitable bond between us. All you need is a notepad, and the world becomes your <i>canvas.</i></p>
<p>Challenging myself allows me to not only grow outside my comfort zone, but gives a new perspective towards life, and how there are no limitations/boundaries that halt you from growing! It is everlasting. Once you develop the growth mindset, your journey just never comes to a complete stop! You are able to focus on self-development and different ways to come out of the comfort zone.</p>
<blockquote>
Nothing Is Impossible. The Word Itself Says 'IM Possible'
<cite>Audrey Hepburn</cite>
</blockquote>
</div>
</section><!-- End About Section -->
所以我想让文本和块引用（出现在底部）响应，并且它应该根据设备的宽度改变大小。
在移动设备上，我希望所有内容都在图像之后垂直对齐，但在更大的设备上，它应该看起来像我发送的代码输出中的样子。
这是用户向我建议的，但似乎没有用：
@media screen and (max-width: 250px) {
font-size: 10vh; // Or the unit you want
flex-direction: column;
}
基本上，我希望文本在移动设备上垂直显示在图片下方，但在大型设备上，它应该显示我在上面的代码中发送的内容。
更新
这是我的输出结果：
我不希望图片变小，我不知道为什么应用更改后它变小了，文字应该在它的正下方。
首先，从 HTML 中的 img 标签中删除 align="left"。 然后添加 float: left; CSS 中的 img 规则集。 最后，修改您的媒体查询以包含部分和 img 选择器：
.aligned {
display: flex;
align-items: top;
}
.p{
padding: 15px;
}
img{
border: 5px solid #555;
float:left;
}
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";
}
@media screen and (max-width: 250px) {
img{
display: block;
float: none;
}
section{
font-size: 10vh; // Or the unit you want
}
}
<section>
<link rel="stylesheet" href="assets/img/profile.jpg">
<img src="assets/img/profile.jpg" width="370" height="500">
<!-- <div style="display:inline-block;"> to put text under something or start new -->
<div class="aligned">
<div class="p">
<p>I am currently exploring different options that will allow me to combine my interests in Business and Technology, and pursue a combined-degree in those fields. Motivated by my love for numbers, I started to explore the many ways I can use my Mathematical knowledge and implement it into different areas. While I always had a passion for business, I was introduced to Computer Science in my junior years of high school, and I came to know that I was genuinely passionated about learning it. It offers a holistic approach to solve problems which I admire, and since then, I have transformed my interest into a personal hobby!</p>
<p>I would always like to challenge myself and learn new programming langauges to increase the size of my toolbox. I was inspired by one of my friends to take my programming skills and put it into a good use; thus, I was introduced to competitive programming and large coding events such as hackathons!</p>
<p>The intellectual challenges, creativity, and logic programming offers has always further strengthened the inevitable bond between us. All you need is a notepad, and the world becomes your <i>canvas.</i></p>
<p>Challenging myself allows me to not only grow outside my comfort zone, but gives a new perspective towards life, and how there are no limitations/boundaries that halt you from growing! It is everlasting. Once you develop the growth mindset, your journey just never comes to a complete stop! You are able to focus on self-development and different ways to come out of the comfort zone.</p>
<blockquote>
Nothing Is Impossible. The Word Itself Says 'IM Possible'
<cite>Audrey Hepburn</cite>
</blockquote>
</div>
</section><!-- End About Section -->
首先，将您的 display: flex 放在您的部分，因为它将作为您的图像和文本的容器。
所以改变这个
.aligned {
display: flex;
align-items: top;
}
至此
section {
display: flex;
align-items: top;
}
或者您可以将 .align class 转移到
接下来，您的媒体查询语法错误，最大屏幕太小。即使是最小的屏幕（Iphone5s）也是 375px。在我看来，500px 是移动设备的安全最大宽度（只是我的偏好）。这是正确的代码
@media screen and (max-width: 500px) {
section {
font-size: 10vh; // Or the unit you want
flex-direction: column;
}
}
我忘了说：要使 display: flex 正常工作，您需要将元素放在 div 中，以便 flex 可以按您想要的方式对齐它。所以你要做的就是将你的图像放入 div 这样的
<div>
<link rel="stylesheet" href="assets/img/profile.jpg">
<img src="assets/img/profile.jpg" align="left" width="370" height="500">
</div>
简而言之，您的 html 结构应该如下所示
<section>
<div>
place your image here
</div>
<div>
place all your texts here
</div>
</section>