最近在進行網頁設計時，遇到了一個問題，就是頁面縮放比例失調了。我寫的CSS樣式在不同分辨率下顯示的效果有明顯差異，使得頁面呈現的效果遠不如預期。下面我將分享這個問題的原因以及解決方法。

@media screen and (min-width: 768px) {
.content {
width: 80%;
margin: 0 auto;
}
}
@media screen and (min-width: 992px) {
.content {
width: 60%;
margin: 0 auto;
}
}

上述代碼是我在寫樣式時使用的響應式布局，根據不同的分辨率分別設置了不同的寬度和居中方式。在大屏幕上效果良好，但是在小屏幕下就會出現問題。

原因是當屏幕寬度介于768px和992px之間時，該頁面沒有一個明確的寬度設置，導致瀏覽器默認使用了全屏幕的寬度，產生了縮放比例失調的問題。

@media screen and (min-width: 768px) {
.content {
width: 80%;
margin: 0 auto;
}
}
@media screen and (min-width: 992px) {
.content {
width: 60%;
margin: 0 auto;
}
}
@media screen and (max-width: 768px) {
.content {
width: 95%;
margin: 0 auto;
}
}

為了解決這個問題，我們可以添加一個最大寬度為屏幕寬度的媒體查詢，使得當屏幕寬度小于768px時，使用95%的寬度。這樣我們就能夠控制頁面的縮放比例，使得它在不同屏幕上呈現一致的效果。

以上是本次分享的內容，希望能夠幫助到大家。