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。一旦你了解了如何最好地使用它们，你会发现它们非常宝贵！