在前端web開發(fā)中，經(jīng)常需要獲取屏幕寬度，然后根據(jù)屏幕寬度的大小來調(diào)整網(wǎng)頁的樣式。這種操作在移動(dòng)端開發(fā)中尤為重要，因?yàn)椴煌叽绲囊苿?dòng)設(shè)備需要適配不同的UI布局。

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

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

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

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

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";
}

上述代碼中，我們首先獲取屏幕寬度，然后根據(jù)不同的屏幕寬度設(shè)置不同的導(dǎo)航欄高度。這樣，當(dāng)用戶在不同的屏幕上瀏覽網(wǎng)站時(shí)，導(dǎo)航欄的高度就能夠適配不同的屏幕尺寸了。

總之，通過JavaScript獲取屏幕寬度并應(yīng)用到CSS樣式中，是一種非常便利的方式，它可以讓我們?cè)诰W(wǎng)頁開發(fā)中更加靈活地適配不同的設(shè)備。