媒体查询解决方案

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]; 
    } 
}