如何使文本在 html/css 中响应？

Question

我想让文本响应，它应该根据设备宽度相应地改变它的大小。

代码：

 .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: "\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"; }

 <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 -->

所以我想让文本和块引用（出现在底部）响应，它应该根据设备的宽度改变大小。

在移动设备上，我希望所有内容都在图像之后垂直对齐，但在更大的设备上，它应该看起来像我发送的代码的 output 中的内容。

这是用户建议的，但似乎不起作用：

@media screen and (max-width: 250px) {
    font-size: 10vh; // Or the unit you want
    flex-direction: column;
}

基本上，我希望文本在移动设备上的图片下方垂直显示，但在大型设备上，它应该显示我在上面的代码中发送的内容。

更新

这是我的 output 的样子：

我不希望图像很小，我不知道为什么在应用更改后它很小，并且文本应该在它的正下方。

Answer 1

首先，从 HTML 中的 img 标签中删除 align="left"。 然后添加浮动：左； 到 CSS 中的 img 规则集。 最后，修改您的媒体查询以包含 section 和 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: "\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"; } @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 -->

Answer 2

首先，把你的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>