CSS(層疊樣式表)是一種用于樣式規劃和布局的編程語言。通過使用CSS，我們可以對網頁的內容、樣式和布局進行控制，使得網頁在不同屏幕上都能呈現出一致的外觀。

然而，CSS并不能直接控制屏幕大小。這是因為瀏覽器具有不同分辨率的屏幕，并且在不同的設備上可能會顯示不同的屏幕大小。因此，我們需要使用CSS的“@media”規則來控制樣式的變化，以適應不同的屏幕大小。

下面，我們將介紹如何使用CSS的@media規則來控制樣式的變化，以適應不同的屏幕大小。

## 使用@media規則

@media規則是一個特殊的CSS規則，它允許我們在文檔中選擇特定的媒體類型(例如：screen、print、speech)時，執行特定的樣式操作。

在CSS中，使用@media規則可以指定以下樣式：

```css

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

/* CSS樣式在這里執行 */

在這個例子中，我們使用@media規則來選擇屏幕寬度小于等于800像素的設備。在這個特定的條件下，我們可以執行一些樣式操作，如更改字體大小、背景顏色等。

類似地，我們也可以使用其他尺寸的媒體查詢，如：

```css

@media screen and (min-width: 801px) {

/* CSS樣式在這里執行 */

在這個例子中，我們使用@media規則來選擇屏幕寬度大于等于801像素的設備。在這個特定的條件下，我們可以執行一些樣式操作，如更改字體大小、背景顏色等。

除了選擇特定的媒體類型，我們還可以使用其他規則來控制樣式的變化。例如，我們可以使用@media規則來更改樣式的優先級，或者使用@media規則來更改樣式的顯示效果。

總之，通過使用@media規則，我們可以方便地控制樣式在不同屏幕上的變化，從而使得網頁在不同設備上都呈現出一致的外觀。