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

【问题标题】：How to link website to several media queries?如何将网站链接到多个媒体查询？
【发布时间】：2017-10-04 02:38:43
【问题描述】：

我想根据不同的媒体查询为我的 HTML 设置不同的样式。例如，我希望我的 HTML 在宽度为 1024 像素或更小的浏览器上查看时以某种方式显示，如果在横向浏览器上查看时以另一种方式显示（例如手机翻转时））。这是我尝试做的；

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

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

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

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

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

谢谢。

【问题讨论】：

我在这个网站上看到了许多关于“媒体查询不响应方向”的问题。你看过那些吗？例如：stackoverflow.com/q/20199764/215552、stackoverflow.com/q/17637833/215552、stackoverflow.com/q/20026904/215552。
非常感谢！成功了！

【解决方案1】：

首先，尝试使用它而不是你拥有的：

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

【讨论】：

好的。我已经编辑了我的代码。我现在该怎么办？谢谢
好吧，为不同的屏幕宽度编写媒体查询（并注意以有意义的顺序编写它们：以max-width: 768px,开头然后为“max- width: 1024px` 因为第二个会覆盖第一个（即 600px 宽的屏幕既低于 768 又低于 1024px 宽）。所以在这个例子中你必须以相反的顺序来做。（注意：我不不知道你的确切问题是什么，所以我不能更具体 - 如果你想要的不仅仅是一个一般的答案，你必须发布你的代码并描述确切的问题......）
非常感谢。它奏效了，我相信。非常感谢！
不客气！索尔，那么将问题标记为正确或投票如何？
我将其标记为正确，但因为我没有足够的代表。积分，我的点赞将不会公开显示。