我的媒体查询无法正常工作，尤其是横向

Question

我正在为一个 Header 处理媒体查询，但媒体查询不起作用。如果我正确修复了一台设备的媒体查询，那么它就无法在我的设备上运行。这是我的代码...

@media (max-width: 499px) {
    .mission h1 {
        font-size: 10px;
        margin-right: 550px;
        margin-top: -15px;
        margin-bottom: 0px;
    }
    .mission h2 {
        font-size: 10px;
        margin-right: 550px;
        margin-bottom: 0px;
    }
    #p1 {
        font-size: 6px;
        margin-right: 540px;
        line-height: 10px;
    }
    #p2 {
        font-size: 5px;
        margin-right: 540px;
        line-height: 10px;
    }
}
@media (min-width: 610px) {
    .mission h1 {
        font-size: 16px;
        margin-right: 550px;
        margin-top: -15px;
        margin-bottom: 0px;
    }
    .mission h2 {
        font-size: 16px;
        margin-right: 550px;
        margin-bottom: 0px;
    }
    #p1 {
        font-size: 10px;
        margin-right: 540px;
        line-height: 10px;
    }
    #p2 {
        font-size: 7.5px;
        margin-right: 540px;
        line-height: 10px;
    }
}
@media (min-width: 700px) {
    .mission h1 {
        font-size: 18px;
        margin-right: 550px;
        margin-top: 50px;
        margin-bottom: 0px;
    }
    .mission h2 {
        font-size: 18px;
        margin-right: 550px;
        margin-bottom: 0px;
    }
    #p1 {
        font-size: 12px;
        margin-right: 540px;
        line-height: 10px;
    }
    #p2 {
        font-size: 12px;
        margin-right: 540px;
        line-height: 10px;
    }
}
@media (min-width: 700px) and (orientation: landscape) {
    .mission h1 {
        font-size: 18px;
        margin-right: 550px;
        margin-top: 50px;
        margin-bottom: 0px;
    }
    .mission h2 {
        font-size: 18px;
        margin-right: 550px;
        margin-bottom: 0px;
    }
    #p1 {
        font-size: 12px;
        margin-right: 540px;
        line-height: 10px;
    }
    #p2 {
        font-size: 12px;
        margin-right: 540px;
        line-height: 10px;
    }
}
@media tv and (min-width: 700px) and (orientation: landscape) {
    .mission h1 {
        font-size: 18px;
        margin-right: 550px;
        margin-top: 50px;
        margin-bottom: 0px;
    }
    .mission h2 {
        font-size: 18px;
        margin-right: 550px;
        margin-bottom: 0px;
    }
    #p1 {
        font-size: 12px;
        margin-right: 540px;
        line-height: 10px;
    }
    #p2 {
        font-size: 12px;
        margin-right: 540px;
        line-height: 10px;
    }
}
@media (max-width: 860px) {
    .mission h1 {
        font-size: 18px;
        margin-right: 550px;
        margin-top: -20px;
        ;
        margin-bottom: 0px;
    }
    .mission h2 {
        font-size: 16px;
        margin-right: 550px;
        margin-bottom: 0px;
    }
    #p1 {
        font-size: 12px;
        margin-right: 540px;
        line-height: 10px;
    }
    #p2 {
        font-size: 8px;
        margin-right: 540px;
        line-height: 10px;
    }
}

我试过的上面的代码稍微解决了我的问题，因为它没有完全响应我想要的。我的网站是实时的，可以使用 link 在线解雇它。 http://www.ericsbo.se/ 我通常通过该网站在线检查我的网站的响应能力。如果有人检查可以发现一些错误。在线检查网站可以在这里找到 http://www.isresponsive.com/

Answer 1

好的，所以我做了一些测试，我知道为什么它这样做是因为最大宽度意味着，"If the [width] is less than or equal to [max-width] return true".

知道了这一点，我们就可以像这样阅读查询：

is 300px <= 499px (returns true)

is 300px <= 800px (returns true)

所以在这种情况下，两者都将 return 为真，我相信 CSS 后一个代码将具有更高的优先级，并将否决前一个代码。所以，你可以切换它并用最小宽度完成它，设置边界（我在评论中建议的）或者我相信如果你把 min-width:499px 逻辑语句 AFTER min-width:800px 逻辑语句应该有效。

编辑：对于横向，我想我能想到的最好的方法（我已经有一段时间没有这样做了）是在横向模式下将逻辑语句分配给你不想运行的每个人and not (orientation: landscape) 所以它不会被触发。可能是更好的方法，但你必须做一些研究。这是一个不错的页面，其中包含一些有用的信息。 CSS Tricks

Answer 2

我做了一些研究并得出结论，涵盖几乎所有媒体设备的最准确的媒体查询如下。

@media only screen and (min-width: 150px) and (max-width: 600px) {
/****** @Style ******/
{

@media only screen and (min-width: 761px) and (max-width: 1200px) {
    /****** @Style ******/
}

我的媒体查询无法正常工作，尤其是横向

My media queries is not working properly especially of landscape

html

css

media