在網頁設計開發過程中，我們經常需要獲得屏幕寬度來進行響應式布局和設計，CSS提供了許多方法來實現。下面我們來介紹一下幾種常用的CSS獲取當前屏幕寬度的方法。

/* 方法一：使用媒體查詢 */ 
@media screen and (max-width: 768px) {
/* 當屏幕寬度小于等于768px時應用此樣式 */
}
/* 方法二：使用vw單位 */
.my-element {
width: 100vw; /* 占滿整個屏幕寬度 */
}
/* 方法三：使用JavaScript獲取，并通過CSS變量使用 */
:root {
--screen-width: 0px; /* 初始化為0px */
}
@media screen and (min-width: 768px) {
:root {
--screen-width: calc(100vw - 16px); /* 實際屏幕寬度減去滾動條寬度 */
}
}
.my-element {
width: var(--screen-width); /* 使用CSS變量作為寬度 */
}

以上三種方法均可以實現獲取當前屏幕寬度，并根據寬度設置樣式。有些情況下我們需要更加靈活地獲取屏幕寬度，在JavaScript代碼中動態修改樣式并響應用戶行為。此時可以使用window對象的innerWidth屬性獲取當前窗口寬度。

// 在JavaScript中獲取當前窗口寬度
var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
console.log(screenWidth);

通過上述方法，我們可以輕松獲取到當前屏幕寬度，并根據實際需求進行動態設置樣式。有了這些技巧，我們在進行響應式布局和設計的時候，就更加方便快捷了。