隨著移動設備的普及，瀏覽器的寬度不斷變化，為了讓網站在不同設備上呈現出最佳的視覺效果，我們需要對網站的樣式進行不同的適配。這時，根據瀏覽器寬度引用css就成了一種好的解決方案。

@media screen and (max-width: 768px) {
/* 當瀏覽器寬度小于等于768px時引用的樣式 */
body {
font-size: 14px;
}
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
/* 當瀏覽器寬度在769px到1024px之間時引用的樣式 */
body {
font-size: 16px;
}
}
@media screen and (min-width: 1025px) {
/* 當瀏覽器寬度大于等于1025px時引用的樣式 */
body {
font-size: 18px;
}
}

上面的代碼展示了如何根據瀏覽器寬度引用不同的CSS樣式。以@media為關鍵詞，緊跟著的括號里面是我們設置的瀏覽器寬度區間，大括號中則是我們要應用的具體樣式。

通過這樣的方式，我們可以輕松實現網站在不同設備上的適配效果，提升用戶的使用體驗。