在前端web開發中，經常需要獲取屏幕寬度，然后根據屏幕寬度的大小來調整網頁的樣式。這種操作在移動端開發中尤為重要，因為不同尺寸的移動設備需要適配不同的UI布局。

而JavaScript正是我們用來獲取屏幕寬度的利器，它提供了兩種方式獲取屏幕寬度。

//第一種方式
var screenWidth1 = window.screen.width; 
//第二種方式
var screenWidth2 = document.documentElement.clientWidth;

這兩種方式中，第一種是獲取屏幕可見區域的寬度，即瀏覽器窗口的寬度；第二種方式是獲取文檔的寬度，也就是不包括滾動條的寬度。

以第一種方式獲取屏幕寬度為例，我們可以將獲取到的屏幕寬度直接賦值給CSS樣式中的某個屬性。例如，我們想要根據屏幕寬度來修改導航欄的高度，就可以這樣寫：

var screenWidth = window.screen.width;
var nav = document.querySelector(".nav");
if(screenWidth< 768) {
nav.style.height = "50px";
} else if(screenWidth >= 768 && screenWidth< 1024) {
nav.style.height = "70px";
} else {
nav.style.height = "90px";
}

上述代碼中，我們首先獲取屏幕寬度，然后根據不同的屏幕寬度設置不同的導航欄高度。這樣，當用戶在不同的屏幕上瀏覽網站時，導航欄的高度就能夠適配不同的屏幕尺寸了。

總之，通過JavaScript獲取屏幕寬度并應用到CSS樣式中，是一種非常便利的方式，它可以讓我們在網頁開發中更加靈活地適配不同的設備。