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

我正在处理一个标题的媒体查询，但媒体查询不起作用。如果我正确修复了某个设备的媒体查询，那么它在我的设备上无法正常工作。这里是我的代码...我的媒体查询无法正常工作，尤其是风景

@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/

来源

2016-09-26 ziaullahzia

您是否试过用最小宽度设置最大宽度限制？例如'@media（min-width：700px）和（max-width：800px）' – Matthew

是的，我做到了..我会再试一次。 – ziaullahzia

阅读更多参与回复的答案。 – Matthew

好了，所以我做了一些测试，我知道为什么它是做什么的，因为最大宽度手段，“如果[宽度]小于或等于到[最大宽度]返回true“。

认识到这一点，我们读到这样的查询：

is 300px <= 499px (returns true)

is 300px <= 800px (returns true)

因此，在这种情况下，既会返回true，我相信在CSS后者的代码将有更大的优先级，并会否决之前的代码。所以，你可以关掉这个与最小宽度完成它，设定一些界限（我在评论建议）或我相信，如果你把min-width:499px逻辑语句后的min-width:800px逻辑语句它应该工作。

编辑：对于景观，我想我可以考虑的最佳方式（我一段时间没有这样做）将分配逻辑陈述给你不想运行的每个人在景观模式下and not (orientation: landscape)所以它不会被触发。可能是更好的方法，但你必须做一些研究。这是一个很好的信息页面。 CSS Tricks

来源

2016-09-26 02:24:46 Matthew

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

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

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

来源

2016-11-17 13:25:42 ziaullahzia

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

回答

相关问题