CSS中的自適應代碼讓網站適應不同設備，比如PC、平板和手機屏幕尺寸。這在現代市場上非常重要，因為越來越多的人使用移動設備瀏覽網站。以下是一些基本的CSS自適應代碼。

/* 響應式CSS */
@media only screen and (max-width: 768px) {
/* 在手機屏幕上隱藏大型導航菜單 */
.nav-menu {
display: none;
}
/* 在手機上顯示簡單導航菜單 */
.mobile-menu {
display: block;
}
}
/* 圖像自適應 */
img {
max-width: 100%;
height: auto;
}
/* 文字自適應 */
body {
font-size: 16px;
line-height: 1.5;
font-family: 'Helvetica Neue', sans-serif;
color: #333;
}
/* 響應式列 */
.row::after {
content: "";
clear: both;
display: table;
}
.col {
float: left;
width: 100%;
padding: 10px;
}
/* 在平板設備上，列寬為50% */
@media only screen and (min-width: 768px) {
.col {
width: 50%;
}
}
/* 在桌面設備上，列寬為33% */
@media only screen and (min-width: 1200px) {
.col {
width: 33.333%;
}
}

這些代碼可以幫助網站在不同屏幕尺寸上獲得更好的展示效果。例如，響應式CSS代碼允許您根據屏幕大小決定顯示或隱藏元素，讓導航菜單在小屏幕上更加簡潔易用。圖像、文字和列等元素的自適應代碼可以根據屏幕大小調整尺寸和布局，從而提供更好的用戶體驗。