在移動設備和響應式設計時，獲取屏幕寬度是非常重要的。而JavaScript就是一個十分便捷的獲取屏幕寬度的工具。 在我們編寫響應式的網頁時，我們經常需要根據設備的屏幕寬度來控制元素的大小和位置，比如針對不同的屏幕大小設置寬高，調整字體大小等等。而這些可以通過JavaScript來輕松實現。 通過window對象獲取屏幕寬度的代碼如下： ```javascript let screenWidth = window.innerWidth; ``` 上述代碼中，window.innerWidth代表當前瀏覽器窗口的寬度（即屏幕寬度），所以我們可以通過這個屬性獲取到當前屏幕的寬度值。鑒于不同瀏覽器之間的差異，我們有時需要加上一些兼容性代碼，以保證我們能夠正確地獲取屏幕寬度。 ```javascript let screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; ``` 上述代碼中，我們使用了三個屬性來獲取屏幕寬度，如果window.innerWidth不起作用，那么我們就會用到document.documentElement.clientWidth和document.body.clientWidth屬性。 屏幕寬度的值是一個整數，我們可以將它存儲在一個變量中，方便我們在后續的代碼中使用。下面是一個完整的獲取屏幕寬度的代碼示例： ```javascript let screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; if (screenWidth< 768) { console.log("這是一個小屏幕"); } else if (screenWidth >= 768 && screenWidth< 992) { console.log("這是一個中等屏幕"); } else { console.log("這是一個大屏幕"); } ``` 在上述代碼中，我們使用了if…else語句來根據屏幕寬度的不同，輸出不同的信息。比如，如果屏幕寬度小于768像素，那么輸出“這是一個小屏幕”，如果屏幕寬度在768像素和992像素之間，那么輸出“這是一個中等屏幕”，否則輸出“這是一個大屏幕”。 此外，我們還可以使用window對象的resize事件來實現在瀏覽器大小改變時自動更新屏幕寬度。 ```javascript window.addEventListener("resize", function() { let screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; console.log("當前屏幕寬度為：" + screenWidth + " 像素"); }); ``` 在上述代碼中，我們通過addEventListener方法注冊一個resize事件的回調函數，當瀏覽器的大小發生改變時，屏幕寬度的值就會被更新，并且輸出到控制臺中。 總結：JavaScript提供了很多便捷的方法來獲取屏幕寬度，通過它我們可以輕松地編寫出響應式的代碼來適配不同的設備。同時，我們還可以通過resize事件來實現自動更新屏幕寬度。