本文目錄導(dǎo)讀：

1. 媒體查詢
2. 視窗單位

CSS自適應(yīng)屏幕高度和寬度的方法

在CSS中，我們可以使用媒體查詢（Media Queries）和視窗單位（Viewport Units）來(lái)實(shí)現(xiàn)屏幕高度和寬度的自適應(yīng)。

媒體查詢

媒體查詢是一種響應(yīng)式設(shè)計(jì)技術(shù)，它可以根據(jù)設(shè)備的屏幕寬度、高度、分辨率等特性，自動(dòng)調(diào)整網(wǎng)頁(yè)的布局和樣式，我們可以使用@media規(guī)則來(lái)定義不同屏幕寬度下的樣式。

@media screen and (max-width: 600px) {
  .container {
    width: 100%;
    padding: 0;
  }
}

上述代碼表示，當(dāng)屏幕寬度小于等于600px時(shí)，.container元素的寬度將自動(dòng)調(diào)整為100%，并且取消內(nèi)邊距。

視窗單位

視窗單位是一種相對(duì)單位，它可以根據(jù)屏幕的寬度和高度來(lái)動(dòng)態(tài)調(diào)整元素的大小和位置，常見(jiàn)的視窗單位有vw（Viewport Width）、vh（Viewport Height）、vmin和vmax。

.container {
  width: 50vw;
  height: 50vh;
}

上述代碼表示，.container元素的寬度將占屏幕寬度的50%，高度將占屏幕高度的50%。

結(jié)合使用媒體查詢和視窗單位，我們可以輕松地實(shí)現(xiàn)屏幕高度和寬度的自適應(yīng)，還需要注意一些細(xì)節(jié)問(wèn)題，如字體大小的調(diào)整、圖片的優(yōu)化等，以確保網(wǎng)頁(yè)在各種設(shè)備上都能良好地展示。