在現代的網站開發過程中，為了讓網站更好地適應不同屏幕尺寸的設備，我們需要對CSS樣式進行適應性調整。而CSS中適應屏幕的樣式有哪些呢？下面我們來一一介紹。

/*設置viewport*//*設置媒體查詢*/
@media screen and (max-width: 768px) {
/*在這里設置屏幕寬度小于等于768px時需要改變的樣式*/
}
@media screen and (min-width: 769px) and (max-width: 991px) {
/*在這里設置屏幕寬度在769px到991px之間時需要改變的樣式*/
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
/*在這里設置屏幕寬度在992px到1199px之間時需要改變的樣式*/
}
@media screen and (min-width: 1200px) {
/*在這里設置屏幕寬度大于等于1200px時需要改變的樣式*/
}
/*使用rem作為單位*/
body {
font-size: 16px; /*設置一個基礎字體大小*/
}
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
}
@media screen and (max-width: 640px) {
body {
font-size: 12px;
}
}
/*使用百分比作為單位*/
.container {
width: 100%; /*設置一個基礎寬度*/
}
@media screen and (max-width: 768px) {
.container {
width: 90%;
}
}
@media screen and (max-width: 640px) {
.container {
width: 80%;
}
}

以上就是CSS中適應屏幕的樣式。在實際開發中，我們可以根據自己的需求進行靈活調整，使網站能夠更好地適應不同屏幕尺寸的設備，提升用戶體驗。