在網站設計中，我們經常會遇到CSS屏幕分辨率錯位的問題。這個問題可能會導致頁面在不同屏幕下顯示不一致的結果，給用戶帶來不好的體驗。

@media screen and (max-width: 768px) {
.some-class {
/* Some styles */
}
}

我們常常使用@media查詢來解決這個問題，它可以讓我們根據屏幕的寬度來應用不同的樣式。

然而，當我們在編寫@media查詢時，可能會出現一些寬度計算錯誤的情況，導致樣式無法正確應用，從而引起錯位問題。

@media screen and (max-width: 991px) {
.some-class {
width: 50%;
margin-left: 25%;
}
}
@media screen and (max-width: 767px) {
.some-class {
width: 100%;
margin-left: 0;
}
}

在這個例子中，我們想讓在寬度小于992px時，某個元素的寬度占屏幕寬度的50%，左邊距占25%；在寬度小于768px時，元素的寬度占100%，左邊距為0。

然而，由于計算錯誤，當寬度恰好在991px或767px時，就會有一定的誤差，導致元素的位置不正確。

為避免這種問題，我們應該準確計算元素的寬度和邊距，以及不同@media查詢之間的差異，從而確保樣式在不同屏幕下呈現正確的位置。