在 CSS 中，我們經常需要根據瀏覽器中元素的實際寬度進行樣式設置。特別是在響應式設計中，我們需要根據元素寬度來制定樣式的變化。因此，判斷 div 寬度成為了經常使用的技巧之一。

/* 通過寬度比例設置樣式 */
div {
width: 50%;
background-color: #f1f1f1;
border: 1px solid #ddd;
padding: 20px;
box-sizing: border-box;
}
@media (max-width: 768px) {
div {
width: 100%;
}
}
/* 通過最小寬度設置樣式 */
div {
min-width: 400px;
max-width: 800px;
background-color: #f1f1f1;
border: 1px solid #ddd;
padding: 20px;
box-sizing: border-box;
}
@media (max-width: 768px) {
div {
min-width: 100%;
max-width: none;
}
}

上面的代碼展示了兩種常用的方式來判斷 div 寬度并設置樣式。第一種方式是通過寬度比例來設置樣式，這種方式在一定程度上可以適應不同寬度的屏幕。當屏幕寬度小于 768px 時，我們將 div 的寬度設置為 100%。這樣，通過響應式設計，可以使得 div 突破原本的 50% 寬度比例限制。

第二種方式是通過最小寬度和最大寬度來設置樣式，這種方式需要設置最小寬度和最大寬度的值。在特定的屏幕寬度下，我們可以通過 media queries 來判斷并修改這些值。通過這種方式，我們可以控制 div 的最小和最大寬度，并且在屏幕尺寸變化時也能夠適應。