如何在其中具有正方形和一些文本的地方创建响应式div

如何解决如何在其中具有正方形和一些文本的地方创建响应式div

下面，我编写代码，在此代码中，我想使响应性为“矩形”和“正方形”，并且还希望在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>

解决方法

对于宽度和高度，请使用%而不是px。对于文本，使用vw单元添加定义字体的ID或类。例如：

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

,

您在这里。如果您需要响应，请使用%或vh / vw

#rectangle
{
    display: flex;
    width: 70vw;
    height: 40vh;
    background-color: brown;
    font-size: 2.3vw;
}
#square
{
    width: 100%;
    height: 100%;
    background-color: chocolate;
    margin-right: 3%;
     display: flex;
  align-items: center;
  justify-content: center;
}

.arrow-up {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0; 
  height: 0; 
  border-left: 10vw solid transparent;
  border-right: 10vw solid transparent;
  border-bottom: 10vw solid black;
}

<div id="rectangle">
   <div id="square">
    <div class="arrow-up"></div>
   </div>

   <p>Lorem ipsum,iusto. Sapiente fugiat illo 
      dolorum assumenda commodi!
   </p>
</div>