Question

我想根据不同的媒体查询不同地设置HTML格式。例如，我希望我的HTML在宽度为1024px或更低的浏览器上以某种方式显示，而在另一种方式中，如果在具有横向方向的浏览器上查看（例如，当手机被翻转时））。这是我尝试做的事情;

@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) {...

如何将网站链接到多个媒体查询？

1 个答案: