>[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 { /* 元素樣式 */ } ```