媒体查询解决方案

Question

当我使用背景图像作为标题时，出现了一个问题。头部高度为100 is，图像在计算机和景观设备中显示良好。但是当我在肖像设备或屏幕上看到它的时候，背景会变得很混乱。我真正的问题是：

是否有一种方式来显示不同的图像为景观和肖像屏幕？

Answer 1

只需使用方向媒体查询即可。

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