如何相对于父级调整3个div的大小(响应式)

要相对于父级调整3个div的大小，可以使用CSS中的相对单位和布局技术来实现响应式设计。

首先，确保父级元素具有适当的布局属性，例如设置为相对定位或弹性布局。然后，使用CSS中的相对单位（如百分比）来设置子元素的大小。

以下是一种可能的实现方法：

HTML结构：

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS样式：

.parent {
  position: relative;
  display: flex;
  justify-content: space-between;
}

.child {
  width: 30%; /* 设置子元素宽度为父元素宽度的30% */
  height: 100px; /* 设置子元素的高度 */
}

在上述示例中，父级元素使用相对定位和弹性布局来创建一个容器。子元素的宽度设置为父元素宽度的30%，这样它们将根据父元素的大小进行自适应调整。

这种方法可以适用于各种设备和屏幕尺寸，实现响应式的布局。根据具体的需求，可以调整子元素的宽度百分比或使用媒体查询来适应不同的屏幕尺寸。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云官网：https://cloud.tencent.com/
• 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 腾讯云弹性伸缩（AS）：https://cloud.tencent.com/product/as
• 腾讯云云函数（SCF）：https://cloud.tencent.com/product/scf
• 腾讯云云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb_mysql
• 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
• 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
• 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
• 腾讯云移动开发（MSS）：https://cloud.tencent.com/product/mss
• 腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
• 腾讯云元宇宙（Metaverse）：https://cloud.tencent.com/product/metaverse