Question

当我使用标题的背景图像时出现问题。标题高度为100vh，图像在计算机和横向设备中显示正常。但是当我在肖像设备或屏幕上观看时，背景变得混乱。我真正的问题是：

有没有办法为风景和肖像显示不同的图像屏幕？

Answer 1

只需使用orientation媒体查询。

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

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

当然，您可以通过常规方式使用媒体查询，但通过使用SASS（可能还有LESS），您可以通过执行以下操作来更改课程在不同方向的工作方式：

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

媒体查询解决方案

1 个答案: