CSS是一種網頁樣式設計語言，它可以讓網頁更加美觀和易讀。在設計響應式網站時，有時需要獲取屏幕寬高比。本文將介紹如何使用CSS獲取屏幕的寬高比。

代碼如下：

body:before {
content: "";
display: block;
padding-top: calc(100vw / 16 * 9); /* 寬高比16:9 */
}

這段代碼使用了CSS偽元素（:before），它可以在元素的內容之前添加一個虛擬的元素，在這里我們用它來創建一個寬高比。

首先，我們在body元素之前添加了一個:before偽元素。接著，我們設置了content屬性為空，這樣我們就沒有添加任何內容。然后，我們將display屬性設置為block，這樣虛擬元素就可以像普通元素一樣顯示。最后，我們設置padding-top屬性為“calc(100vw / 16 * 9)”。

這里的“calc()”函數是CSS的計算函數，它相當于一個計算器。它可以用來計算任意大小的值，并且支持基本的數學運算符。在這里，我們設置了“100vw”作為寬度，這樣它可以根據屏幕的寬度來進行縮放。我們還設置了一個16:9的寬高比，這意味著我們將屏幕寬度分成16份，高度分成9份。

這樣，我們就得到了一個16:9的寬高比。如果你想獲得其他的寬高比，只需要調整“16:9”這個比例即可。

總結：使用:before偽元素和calc()函數可以輕松地獲取屏幕寬高比，這對于響應式網站的設計非常有用。