CSS橫屏兼容是前端開發中一個重要的問題。當用戶將手機或平板設備橫屏時，頁面的顯示往往會出現問題，影響了用戶體驗。下面介紹幾種解決Css橫屏兼容問題的方法。

/*方法一：使用媒體查詢*/
@media screen and (orientation: portrait) {
/*手機或者平板設備豎屏時的樣式*/
}
@media screen and (orientation: landscape) {
/*手機或者平板設備橫屏時的樣式*/
}
/*方法二：使用JavaScript*/
window.addEventListener("orientationchange", function() {
if (window.orientation === 180 || window.orientation === 0) {
/*豎屏時的樣式*/
}
if (window.orientation === 90 || window.orientation === -90) {
/*橫屏時的樣式*/
}
}, false);

無論采用哪種方法，建議在設計頁面時避免使用絕對或固定的尺寸和位置，而應采用相對單位和自適應布局。這可以有效避免橫屏時的顯示問題，并使頁面在不同大小的設備上看起來更加一致。