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

Posted 2023-05-08

【中文标题】如何使文本在 html/css 中响应？

【英文标题】：How to make text responsive in html/css?

【发布时间】：2021-05-25 06:44:30

【问题描述】：

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

代码：

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

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

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

更新

这是我的输出的样子：

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

【问题讨论】：

您的媒体查询不包含选择器。你想用它改变什么元素？

字体大小（如果适用），然后我想让文本垂直定位在图像之后，仅在移动设备或更小的屏幕上。

如果你想回复font-size，那么在css中为你的文本使用rem单位。

【参考方案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"  >

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

【讨论】：

我还需要在 HTML 中引用选择器吗？

很抱歉。我已经更新了我的答案以提供更多信息。这对我有用。

抱歉还有一件事，块引用不会根据屏幕改变大小，在移动设备上真的很小

Vh 是视口高度。尝试使用不同的单位。例如 1.5rem

【参考方案2】：

首先，将您的display: flex 放在您的部分，因为它将作为您的图像和文本的容器。

所以改变这个

.aligned  
  display: flex; 
  align-items: top; 

到这里

section  
  display: flex; 
  align-items: top; 

或者您可以将.align 类转移到部分

接下来，您的媒体查询语法错误且最大屏幕太小。即使是最小的屏幕（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"  >
</div>

简而言之，你的 html 结构应该是这样的

<section>
  <div>
     place your image here
  </div>
  <div>
     place all your texts here
  </div>
</section>