在網頁設計時，需要考慮到不同屏幕尺寸的設備上顯示的效果。為了適應不同屏幕尺寸，我們需要使用不同的CSS樣式。

@media screen and (max-width: 600px) {
/* 在屏幕寬度小于或等于600px時應用的樣式 */
}
@media screen and (min-width: 601px) and (max-width: 900px) {
/* 在屏幕寬度大于600px且小于或等于900px時應用的樣式 */
}
@media screen and (min-width: 901px) {
/* 在屏幕寬度大于900px時應用的樣式 */
}

在上述代碼中，我們使用了CSS3的媒體查詢（media query）來確定不同屏幕尺寸應用的樣式。媒體查詢基于設備的屬性，如屏幕尺寸、屏幕方向、設備像素比等來確定應用的樣式。

在編寫CSS樣式時可以通過@media關鍵字來定義不同的媒體查詢條件。例如，當屏幕寬度小于或等于600px時應用的樣式可以寫成@media screen and (max-width: 600px) {}。當屏幕寬度在600px和900px之間時應用的樣式可以寫成@media screen and (min-width: 601px) and (max-width: 900px) {}。

在實際應用過程中，我們可以根據常見的設備尺寸和屏幕方向編寫如下媒體查詢：

@media screen and (min-width: 768px) and (orientation: portrait) {
/* 平板設備豎屏時應用的樣式 */
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
/* 平板設備橫屏時應用的樣式 */
}
@media screen and (min-width: 1280px) {
/* 桌面設備應用的樣式 */
}

通過不同屏幕尺寸的媒體查詢，我們可以為不同設備提供不同的樣式，從而有效優化用戶的瀏覽體驗。