如何向link 网站向多个媒体查询？

Question

我想根据不同的媒体查询设置不同的 HTML 样式。例如，我希望我的 HTML 在宽度为 1024px 或更小的浏览器上以某种方式显示，而在横向浏览器上以另一种方式显示（比如当phone 翻过来）。这是我尝试做的；

@media (max-width: 1024px) {
 h1{
        margin-top: 10px;
    }
}

@media (orientation: landscape) {
 h1{
        margin-top: 20px;
    }
}

<html>
    <body>
           <h1>Hello world</h1>
    </body>
</html>

但不幸的是，它没有用。问题是当我在横向设备上加载网站时，代码没有改变。

注意：我的问题是不是媒体查询完全不起作用。但是，我无法使用 两个以上 媒体查询。

谢谢。

Answer 1

作为开始，请尝试使用它而不是您拥有的：

@media screen and (max-width: 1024px) {...

How to link website to several media queries?