html - 如何创建一个响应式 div 里面有一个正方形和一些文本

Question

下面我编写代码，在此代码中，我想制作响应式“矩形”和“方形”，并且我还想在 p 标签中制作响应式文本。

#rectangle
{
    display: flex;
    width: 500px;
    height: 150px;
    background-color: brown;
}
#square
{
    width: 300px;
    height: 130px;
    background-color: chocolate;
    margin: 10px;
}

<div id="rectangle">
   <div id="square">

   </div>

   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut, iusto. Sapiente fugiat illo 
      dolorum assumenda commodi!
   </p>
</div>

标签： htmlcss

Answer 1

对于宽度和高度，使用%代替px. 对于文本，添加使用单位定义字体的 id 或类vw。例如：

<div id="rectangle">
  <div id="square">

  </div>
  <p id='text'>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut, iusto. Sapiente 
    fugiat illo dolorum assumenda commodi!
  </p>
</div>

#rectangle
{
    background-color: brown;
    display: flex;
    height: 8%;
    position: relative;
    width: 10%;
}
#square
{
    background-color: chocolate;
    height: 8%;
    margin: 10px;
    position: relative;
    width: 10%;
}
#text
{
    font-size: 2vw;
}