>[danger]屏幕大小变化的时候是如何适配的？ 在 CSS 中，可以使用不同的技术和技巧来实现屏幕大小变化时的适配，常见的方法包括： 1. **媒体查询（Media Queries）**：使用媒体查询可以根据设备的屏幕宽度、高度、分辨率等属性来应用不同的 CSS 规则。通过在 CSS 中定义不同的媒体查询断点，并为不同的屏幕范围设置相应的样式，页面可以在不同的设备上自动调整布局和样式。例如： ```css /* 在屏幕宽度小于等于 600px 时应用以下样式 */ @media (max-width: 600px) { /* 样式规则 */ } /* 在屏幕宽度大于 600px 且小于等于 1200px 时应用以下样式 */ @media (min-width: 601px) and (max-width: 1200px) { /* 样式规则 */ } ``` 2. **流式布局（Fluid Layout）**：通过使用相对单位（例如百分比）来定义布局中的尺寸和位置，使页面元素能够相对于父元素或视口进行适应性调整。这样，在屏幕大小变化时，元素会随之伸缩以适应新的容器尺寸。例如： ```css .container { width: 100%; /* 相对于父元素宽度为100% */ } .column { width: 50%; /* 相对于父元素宽度的50% */ } ``` 3. **弹性盒模型（Flexbox）**：使用弹性盒模型可以轻松地实现灵活的布局和对齐方式。弹性容器（父元素）的子元素可以根据设置的弹性属性自动调整尺寸和位置，以适应不同屏幕大小。例如： ```css .container { display: flex; /* 启用弹性盒模型 */ justify-content: space-between; /* 子元素在主轴上均匀分布 */ } .item { flex: 1; /* 按比例分配剩余空间给子元素 */ } ``` 4. **网格布局（Grid Layout）**：使用网格布局可以将页面划分为行和列的网格，并在网格中放置元素。通过定义网格模板和设置自动放置或对齐方式，可以轻松地实现响应式的布局。例如： ```css .container { display: grid; /* 启用网格布局 */ grid-template-columns: repeat(3, 1fr); /* 定义三列的网格模板 */ grid-gap: 10px; /* 设置网格之间的间隔 */ } .item { /* 元素样式 */ } ```