在Web開發過程中，我們經常遇到一個問題：如何使樣式在不同屏幕上都能夠呈現良好的效果？

代碼實現
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
}
@media screen and (max-width: 576px) {
body {
font-size: 12px;
}
}

以上代碼使用@media查詢實現了根據不同屏幕大小來改變字體大小的效果。在屏幕寬度小于768px時，字體大小為14px，在屏幕寬度小于576px時，字體大小為12px，這保證了在不同大小的屏幕上都有較好的閱讀體驗。

在編寫CSS樣式時，需要注意到各瀏覽器之間的差異，尤其是IE瀏覽器。例如，在IE瀏覽器中，邊框和內邊距的計算方式與其他瀏覽器不同，需要額外的hack代碼來解決兼容性問題。

代碼實現
.example {
border: 1px solid #ccc;
padding: 10px;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.example {
border: none;
border-width: 1px;
border-style: solid;
border-color: #ccc;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
}

以上代碼使用@media查詢結合-ms-high-contrast屬性實現了在IE瀏覽器中解決邊框和內邊距兼容性問題的效果。

除了兼容不同屏幕和瀏覽器之外，還要考慮到用戶設置的字體大小等因素。為了讓樣式更加靈活和兼容，可以使用rem、em等可縮放的單位，使得樣式能夠隨用戶設置的字體大小進行縮放。

代碼實現
body {
font-size: 16px;
}
.example {
padding: 1rem;
}

以上代碼使用rem單位來設置padding大小，根據body元素的字體大小來進行比例縮放，從而保持樣式的一致性。

總之，在編寫CSS樣式時，需要考慮到各種不同的因素，包括不同屏幕大小、不同瀏覽器、用戶設置的字體大小等，從而保證樣式的兼容性和靈活性。