css让盒子跟随浏览器的大小而自适应

作者：System 时间：2024年08月21日分类：所有,css3 字数：354

要使盒子跟随浏览器的大小而自适应，可以使用CSS的百分比（%）或视口单位（vw, vh）。以下是两种方法的示例代码：

使用百分比：




.box {
  width: 50%; /* 宽度为浏览器宽度的50% */
  height: 50%; /* 高度为浏览器高度的50% */
}

使用视口单位：




.box {
  width: 10vw; /* 宽度为视口宽度的10% */
  height: 10vh; /* 高度为视口高度的10% */
}

使用这些方法，盒子将随着浏览器窗口的大小变化而自适应。百分比方法是相对于父元素，而视口单位是相对于浏览器窗口的大小。根据需求选择合适的单位。