CSS自適應性在網頁設計中非常重要，因為它讓網站可以在不同的屏幕尺寸下正確地顯示和響應。以下是我們可以使用的三種CSS自適應性寫法：

/* 第一種方法：使用百分比單位 */
.container {
width: 100%;
height: 50%;
padding: 10%;
margin: 5%;
text-align: center;
background-color: #ccc;
}
/* 第二種方法：使用媒體查詢 */
@media (max-width: 767px) {
.container {
font-size: 16px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.container {
font-size: 24px;
}
}
@media (min-width: 992px) {
.container {
font-size: 32px;
}
}
/* 第三種方法：使用CSS Grid */
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}
@media (max-width: 767px) {
.container {
grid-template-columns: 1fr;
}
}

第一種方法很簡單，我們可以使用百分比單位來指定元素的寬度、高度、內邊距和外邊距。這允許元素隨著屏幕尺寸的變化而自動調整大小。

第二種方法使用媒體查詢，可以在不同的屏幕尺寸下使用不同的CSS樣式。例如，我們可以在小屏幕上使用較小的字號，并在大屏幕上使用更大的字號。

第三種方法基于CSS Grid布局，可以將頁面分成多個區域，并在不同的屏幕尺寸下重新排列這些區域。這允許我們創建自適應和響應式布局，使網站在不同設備和屏幕尺寸下具有良好的可讀性和易用性。