Question

我正在处理一个标头的媒体查询，但媒体查询无效。如果我正确修复了一台设备的媒体查询，那么它无法在我的设备上运行。这是我的代码......

@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;
    }
}

我试过的上面的代码解决了我的问题，因为它没有完全响应我想要的。我的网站是直播的，可以使用链接在线解雇。 http://www.ericsbo.se/ 我通常会在网站上查看我的网站是否有响应。如果任何一个检查可以找到一些错误。在线查看网站可在此处找到http://www.isresponsive.com/

Answer 1

好的，所以我做了一些测试，我知道 为什么 它正在这样做，因为max-width意味着“如果[width]小于或等于到[max-width]返回true“。

知道了这一点，我们读了这样的查询：

is 300px <= 499px (returns true)

is 300px <= 800px (returns true)

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

编辑：对于横向，我想我能想到的最佳方式（我暂时还没有这样做）就是将逻辑语句分配给你不想在横向模式下运行的每个人{{1}所以它不会被触发。可能是更好的方法，但你必须做一些研究。这是一个很好的信息页面。 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 ******/
}

我的媒体查询工作不正常，特别是景观

2 个答案: