通過offsetWidth屬性可以獲取元素的寬度，從而可以根據不同屏幕尺寸來調整元素的樣式從而實現響應式設計。以下是一個簡單的示例代碼：
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100%;
height: 200px;
background-color: lightblue;
}
@media screen and (max-width: 600px) {
.box {
background-color: lightcoral;
}
}
</style>
</head>
<body>
<div class="box" id="myBox">Responsive Box</div>
<script>
window.onresize = function() {
var box = document.getElementById("myBox");
var width = box.offsetWidth;
if (width < 600) {
box.style.backgroundColor = "lightcoral";
} else {
box.style.backgroundColor = "lightblue";
}
}
</script>
</body>
</html>
在上面的示例中，我們通過監聽窗口的resize事件來實時獲取元素的寬度，并根據不同的寬度來改變元素的背景顏色，從而實現響應式設計。當窗口寬度小于600px時，元素的背景顏色變為lightcoral，否則為lightblue。這樣就可以根據不同屏幕尺寸來調整元素的樣式，實現響應式設計。
