CSS是用于網頁布局和樣式設計的技術，可以幫助我們輕松地改變網頁的外觀和排版。然而，獲取屏幕大小并設置合適的樣式并不是一件簡單的事情，需要我們使用CSS的@media語句來控制樣式的應用。在本文中，我們將探討如何使用CSS獲取屏幕大小并設置樣式。

我們需要先了解CSS中的@media語句。@media語句可以用來控制樣式的應用，只有在屏幕大小發生變化時才會生效。我們可以使用@media語句來設置樣式，例如：

```css

/* 在屏幕大小為小屏幕時應用樣式 */

@media screen and (max-width: 480px) {

/* 樣式 */

上面的代碼將會在屏幕大小為480px或小于480px時應用樣式。

接下來，我們可以使用CSS的媒體查詢來獲取屏幕大小。媒體查詢可以查詢設備類型、屏幕分辨率、設備寬度、設備高度等條件，只有在滿足這些條件時才會應用樣式。媒體查詢的語法如下：

```css

/* 應用于所有設備 */

/* 應用于小屏幕設備 */

/* 應用于大屏幕設備 */

/* 應用于其他設備 */

@media screen and (media-query-name) {

/* 樣式 */

上面的代碼將會在所有設備上應用樣式，而如果你的網頁只適用于小屏幕設備，則可以在media-query-name中指定“screen and (max-width: 480px)”。

最后，我們可以使用CSS的@media print語句來將樣式應用于打印時。@media print語句可以控制樣式在打印時是否生效，只有在打印時才會應用樣式。

總之，通過使用CSS的@media語句，我們可以輕松地獲取屏幕大小并設置樣式，從而實現更加靈活的網頁布局。