獲取當(dāng)前屏幕寬度是CSS中的一個(gè)常見需求，通常用于響應(yīng)式設(shè)計(jì)和布局，雖然CSS本身沒有直接獲取屏幕寬度的函數(shù)，但我們可以利用一些CSS屬性和技術(shù)來(lái)實(shí)現(xiàn)。

一種常見的方法是使用CSS的@media規(guī)則，這個(gè)規(guī)則可以根據(jù)設(shè)備的屏幕寬度來(lái)應(yīng)用不同的樣式，我們可以設(shè)置一個(gè)媒體查詢，當(dāng)屏幕寬度達(dá)到某個(gè)值時(shí)，應(yīng)用相應(yīng)的樣式。

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

在這個(gè)例子中，當(dāng)屏幕寬度小于或等于600像素時(shí)，背景顏色會(huì)變成淡藍(lán)色。

另一種方法是使用JavaScript來(lái)獲取屏幕寬度，并在CSS中應(yīng)用相應(yīng)的樣式，這種方法需要JavaScript和CSS的結(jié)合使用，我們需要使用JavaScript來(lái)獲取屏幕寬度，然后將這個(gè)寬度值傳遞給CSS類名或?qū)傩浴?/p>

var screenWidth = window.innerWidth || document.documentElement.clientWidth;
var cssClass = 'large-screen';
if (screenWidth <= 600) {
  cssClass = 'small-screen';
}
document.body.className += ' ' + cssClass;

在這個(gè)JavaScript代碼中，我們獲取了屏幕寬度，并根據(jù)寬度值設(shè)置了一個(gè)CSS類名，我們可以在CSS中定義這兩個(gè)類名對(duì)應(yīng)的樣式：

.large-screen {
  background-color: lightgreen;
}
.small-screen {
  background-color: lightblue;
}

在這個(gè)例子中，根據(jù)屏幕寬度，背景顏色會(huì)在綠色和藍(lán)色之間切換。

獲取當(dāng)前屏幕寬度是CSS中的一個(gè)重要技巧，可以幫助我們創(chuàng)建更加靈活和響應(yīng)式的網(wǎng)頁(yè)布局，通過(guò)結(jié)合JavaScript和CSS，我們可以實(shí)現(xiàn)更加復(fù)雜和動(dòng)態(tài)的效果。