作为浏览器调整大小的CSS媒体查询？

Question

我觉得CSS媒体查询不起作用，因为用户调整浏览器的大小？用户将不得不刷新页面才能使媒体查询生效？我怎样才能用JS更新媒体查询？目前我使用JS来检测调整大小的窗口大小添加addClass()

Answer 1

您不需要JS for MediaQueries工作或检测屏幕大小/视图端口。此外，您不需要刷新浏览器以查看MediaQuery的结果。

看看这篇文章的详细信息和“如何”使用MediaQueries：

http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

可能实现这一目标的最简单的方法是在你的HTML的头部提供单独MediaQueries：

<link rel="stylesheet" type="text/css" media="only screen and (min-width: 480px)" href="/css/small-device.css" /> 

您还可以在主样式表中使用MediaQueries：

@media screen and (max-width: 350px) { /* -- If the view port is less than 350px wide (portrait on phone) then display the following styles -- */ 
    .content{ 
     padding:6px; 
    } 
} 

我强烈建议花时间阅读上述文章以更好地了解MediaQueries。一旦你明白如何最好地使用它们，你会发现它们非常宝贵！