媒體查詢解決方案

Question

當我爲標題使用背景圖像時出現問題。標題高度爲100vh，圖像在計算機和景觀設備中顯示效果良好。但是當我在縱向設備或屏幕上觀看它時，背景會變得混亂。我真正的問題是：

有沒有一種方法來顯示不同的圖像爲橫向和肖像 屏幕？

Answer 1

只需使用orientation媒體查詢。

@media all and (orientation: portrait) { ... } 

@media all and (orientation: landscape) { ... } 

當然，你也可以只使用媒體查詢的常規方式，而是通過使用SASS（也可能更少些），你可以更改你的類在不同的方向做類似的工作原理：

.my-class { 
    background: [normal background]; // assuming the default is portrait 
    @media all and (orientation: landscape) { 
     // override for landscape 
     background: [landscape background]; 
    } 
}